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