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 de le ralentir, de sorte qu'il ne sera pas instantanée ?

InformationsquelleAutor Plaski | 2010-12-03
  1. 77

    Suffit d'utiliser .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 bien, vous avez besoin de la jQuery plugin color, ou jQuery UI inclus pour animer la couleur. Ci-dessus, la durée est de 1000ms, vous pouvez le modifier, ou tout simplement la laisser de côté pour le défaut 400ms durée.

    • Ce serait cool si DONC a la réponse en temps réel de surveillance pour regarder les gens, mais ce serait une énorme ressource de porc 😉
    • Vous pouvez également utiliser .filtre ( " : not(:animé)') pour vérifier que l'animation est terminée en cours d'exécution avant d'exécuter à nouveau. Un bon exemple peut être trouvé ici: css-tricks.com/examples/jQueryStop
    • Vous pouvez également inclure un .stop() avant de l'animer la partie, sinon, vous obtenez un long durating flangy effet lorsque vous déplacez votre souris à travers l'élément vite une couple de fois. Voici le violon a ajouté que jsfiddle.net/GELTP/1586
    InformationsquelleAutor Nick Craver
  2. 9

    Vous pourriez opter pour un pur CSS solution:

    #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 */
}
    • ...oublié d'ajouter le délai à la fin, par exemple la transition: couleur 1s ease-in-out 2s;", ajoutant à 2 secondes de retard à l'animation.
    InformationsquelleAutor blend
  3. 0

    L'exemple de jQuery le site web de l'anime, de la taille ET de la police mais vous pouvez facilement les modifier en fonction de vos besoins

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

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

    InformationsquelleAutor Levi Hackwith
  4. 0

    Vous pouvez cependant les utiliser ".css" et d'appliquer les transitions css de la div concernée. Afin de continuer à utiliser ".css" et d'ajouter ci-dessous les styles à votre feuille de style pour l' "#hfont1". Depuis ".css" permet beaucoup plus de propriétés qu' ".animer, c'est toujours ma méthode de prédilection.

    #hfont1 {
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
}
    InformationsquelleAutor eroedig
  5. 0

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

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

    Nous avons la durée de jeu de propriétés à 6000.

    Ceci permettra de définir le temps en millième de secondes: 6 secondes.

    Après la durée de notre propriété suivante "l'assouplissement" des changements de la façon dont notre CSS qui se passe.

    Nous avons notre positionnement absolu.

    Il y a deux ceux par défaut de la valeur absolue de la fonction: "linéaire" et "swing".

    Dans cet exemple, je suis en utilisant linéaire.

    Il permet d'utiliser un même rythme.

    L'autre "swing" permet une exponentielle de l'accroissement de la vitesse.

    Il y a un tas de vraiment cool pour les propriétés à utiliser avec animer 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");
    });
});
    InformationsquelleAutor user5474108