Блог

Есть div с анимацией css

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

animation-duration Свойство установлено на 2000 мс
, и я пытаюсь изменить скорость анимации с помощью jquery
, например, добавив 200 мс к текущему значению

что-то вроде

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

Переменная ‘val’ не является целым числом (2s). Вы не можете умножать на это значение. Вам нужно использовать parseInt(), чтобы вернуть целое число (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"});

 });
  

Редактировать: parseFloat еще лучше. Таким образом, вы можете использовать toFixed, чтобы получить целое число с 2 десятичными знаками.

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

            });
  

Попробуйте это.

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

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