web-dev-qa-db-fra.com

jquery animate .css

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 l'animer ou le ralentir pour qu'il ne soit pas instantané?

javascriptjqueryjquery-animate
24
Plaski

Utilisez simplement .animate() au lieu de .css() (avec une durée si vous le souhaitez), comme ceci:

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

Vous pouvez le tester ici . Notez cependant que vous avez besoin du jQuery color plugin , ou jQuery UI inclus pour animer la couleur. Dans ce qui précède, la durée est de 1000 ms, vous pouvez la modifier ou simplement la laisser pour la durée par défaut de 400 ms.

74
Nick Craver

Vous pouvez opter pour une solution CSS pure:

#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 */
}
9
blend

L'exemple du site Web de jQuery anime la taille ET la police, mais vous pouvez le modifier facilement

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

http://api.jquery.com/animate/

0
Levi Hackwith

Si vous avez 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 la propriété duration définie sur 6000.

Cela va définir le temps en millième de secondes: 6 secondes.

Après la durée, notre prochaine propriété "easing" modifie la façon dont notre CSS se produit.

Notre positionnement est défini sur absolu.

Il y a deux valeurs par défaut pour la fonction absolue: 'linéaire' et 'swing'.

Dans cet exemple, j'utilise linéaire.

Cela lui permet d'utiliser un rythme uniforme.

L'autre «swing» permet une augmentation de vitesse exponentielle.

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");
    });
});
0
user5474108

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". Puisque ".css" autorise 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;
}
0
eroedig