jquery Animer de

Question

J'ai un script:

$('#hfont1').hover(
    function() { 
     $(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover 
    }, 
    function() { 
     $(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout 
    } 
); 

Comment puis-je animer ou ralentir, donc il ne sera pas instantanée?

Answer 1

Il suffit d'utiliser .animate() au lieu de .css() (avec une durée si vous voulez), comme ceci:

$('#hfont1').hover(function() { 
    $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000); 
}, function() { 
    $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000); 
}); 

You can test it here. Notez cependant, vous avez besoin de jQuery color plugin, ou jQuery UI inclus pour animer la couleur. Dans ce qui précède, la durée est de 1000ms, vous pouvez le changer, ou simplement le laisser pour la durée par défaut de 400ms.

Answer 2

L'exemple du site Web de jQuery anime la taille et la police, mais vous pouvez facilement modifier pour l'adapter à vos besoins

$("#go").click(function(){ 
    $("#block").animate({ 
    width: "70%", 
    opacity: 0.4, 
    marginLeft: "0.6in", 
    fontSize: "3em", 
    borderWidth: "10px" 
    }, 1500); 

Answer 3

Vous pouvez opter pour une solution pure CSS:

#hfont1 { 
    transition: color 1s ease-in-out; 
    -moz-transition: color 1s ease-in-out; /* FF 4 */ 
    -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */ 
    -o-transition: color 1s ease-in-out; /* Opera */ 
} 

Answer 4

Vous pouvez toujours utiliser ".css" et appliquer des transitions CSS à la div affectée. Continuez donc à utiliser ".css" et ajoutez les styles ci-dessous à votre feuille de style pour "# hfont1". Depuis ".css" permet beaucoup plus de propriétés que ".animate", c'est toujours ma méthode préférée.

#hfont1 { 
    -webkit-transition: width 0.4s; 
    transition: width 0.4s; 
} 

Answer 5

Si vous besoin d'utiliser CSS avec la fonction jQuery .animate(), vous pouvez utiliser définir la durée.

$("#my_image").css({ 
    'left':'1000px', 
    6000, '' 
}); 

Nous avons l'ensemble de la propriété de durée à 6000.

Cela va régler le temps en millièmes de secondes: 6 secondes. Après la durée de notre prochaine propriété "assouplissement" change la façon dont notre CSS se produit.

Nous avons notre positionnement défini à absolu.

Il existe deux fonctions par défaut pour la fonction absolue: 'linear' et 'swing'.

Dans cet exemple, j'utilise linear.

Il lui permet d'utiliser un rythme régulier.

L'autre 'swing' permet une augmentation exponentielle de la vitesse.

Il y a un tas de propriétés vraiment cool à utiliser avec Animer comme rebond, etc.

$(document).ready(function(){ 
    $("#my_image").css({ 
     'height': '100px', 
     'width':'100px', 
     'background-color':'#0000EE', 
     'position':'absolute' 
    });// property than value 

    $("#my_image").animate({ 
     'left':'1000px' 
    },6000, 'linear', function(){ 
     alert("Done Animating"); 
    }); 
});