Target animation speed using jquery

Komskie 0
Viewed 23

Is there a way to target animation duration of css using jquery?

.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
jquery css
1 Answers

You can use jQuery's css() method to amend the setting of a CSS rule for a given element. In your case it would look something like this:

$('.hvr-pule-grow').css('animation-duration', '1s'); // change value argument as required.

It's worth noting two additional points. Firstly animation rules are now very well supported. You don't need to use the -webkit prefixes on them.

Secondly, it would better practice, if possible, to set the duration using a class and apply that to the element when required. This maintains the separation of concerns between the JS logic and the UI.

.hvr-pulse-grow:hover, 
.hvr-pulse-grow:focus, 
.hvr-pulse-grow:active {
  /* use shorthand rule */
  animation: hvr-pulse-grow 0.1s linear infinite alternate;
}

.hvr-pule-grow.slow {
  animation-duration: 1s;
}
Rory McCrossan0
Related