Comment ajouter + 200 ms à la durée de l'animation CSS en cliquant sur jQuery

Nippledisaster

Il y a un div avec une animation css

.mydiv {
    animation: ticker 2000ms linear 0s infinite normal none running;
}

La animation-durationpropriété est définie sur 2000ms et j'essaye de changer la vitesse de l'animation avec jquery par exemple en ajoutant 200ms à la valeur courante

quelque chose comme

$( "#speedup" ).click(function() {
 var mydiv = $( ".mydiv" );
 var val = mydiv.css('animation-duration');
 $(".mydiv").css("animation-duration", val + "ms")+200;
});
ElBrm

La variable «val» n'est pas un entier (2s). Vous ne pouvez pas multiplier avec cette valeur. Vous devez utiliser parseInt () pour renvoyer l'entier (2).

$('#speedup').click(function(){

       var mydiv = $( ".mydiv" );
       var val = mydiv.css('animation-duration');
       var newVal = (parseInt(val) * 1000); //parseInt(val) creates the integer 2. Multiply with 1000 to get 2000

       mydiv.css({"animation-duration" : newVal - 200 + "ms"});

 });

Edit: ParseFloat est encore meilleur. De cette façon, vous pouvez utiliser toFixed pour obtenir l'entier avec 2 décimales.

https://jsfiddle.net/qcajbtz8/

$('#speedup').click(function(){

                var mydiv = $( ".mydiv" );
                var val = mydiv.css('animation-duration');
                var newVal = (parseFloat(val).toFixed(2) * 1000);

                mydiv.css({"animation-duration" : newVal - 200 + "ms"});

            });

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

chaudétiquette

Archive