How to Add +200ms to css animation-duration on click jQuery

user_4422008 0
Viewed 110

There is a div with css animation

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

The animation-duration property is set to 2000ms and im trying to change the speed of the animation with jquery for example adding 200ms to the currentvalue

something like

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

Try this.

    var val = currentvalue;
    $( "#speedup" ).click(function() {
     var mydiv = $( ".mydiv" );
     val = val + 200;

     $(".mydiv").css("animation-duration", val + "ms");
    });
user_101432630

The variable 'val' is not an integer (2s). You can't multiply with this value. You need to use parseInt() to return the integer (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 is even better. This way you can use toFixed to get the integer with 2 decimals.

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

            });
user_22519200
Related