Changer de Font-size lors d'une animation horizontale Résolu/Fermé

Question

Bonsoir,
J'ai une nav qui part de gauche à droite via JS via ce script :
$(document).ready(function(){
	$('.nav').hide();
});
$(window).load(function(){
	$('.nav').fadeIn('slow');
	$(".nav").delay(700).animate({
		left:'0px',
		opacity:1
	},1200,'swing');
});

Est-il possible aussi de changer la font-size ? Importante à gauche et taille normale à droite ?
Merci pour votre aide.
LM


Configuration: Macintosh / Chrome 103.0.0.0

DoctorHow · Answer

Salut, donc avec JQuery ici.
Oui c'est possible de changer la taille de police 
https://developer.mozilla.org/fr/docs/Web/CSS/font-size


C'est une propriété CSS, donc accessible via style comme expliqué ici
https://www.zonecss.fr/cours-css-javascript/acceder-aux-css-en-javascript.html

Et encore plus simple en JQuery avec css()
https://www.geeksforgeeks.org/how-to-change-font-size-using-jquery/

 ou mieux en utilisant des classes CSS et avec JQuery avec toggle Class(au lieu de changer plusieurs régles CSS on change la classe):
https://api.jquery.com/toggleClass/

Pour ce genre d'animation vous pouvez aussi vous passer de la programmation et faire une animation uniquement en CSS. Il y a 2 méthodes d'animations en CSS l'une avec keyframe qui définit des étapes clés.

Par contre si vous voulez 2 tailles de polices différentes il faut utiliser 2 éléments HTML distincts et cibler ceux ci distinctement. Donc dans une animation deux animations pour chaque élément ou alors animer l'élément parent(il faudra quand même changer les 2 tailles de police séparément, deux propriété CSS différentes nécessitent 2 éléments HTML différents).

lamontange · Answer

Merci beaucoup DoctorHow :)
Bonne journée !

Changer de Font-size lors d'une animation horizontale

2 réponses

Discussions similaires