My animation currently works, when :hover is triggered. I would instead like to initiate the animation on a button click but I don't know how to interact with the CSS from JQuery?

//CSS

.mouth{
  top: 268px;
  left: 273px;
  position: relative;
}

.frame:hover .mouth {
  animation-name: talk;
  animation-duration: 0.75s;
  animation-iteration-count: 5;
}

@keyframes talk {
  0%, 100%{
    top: 268px;
    left: 273px;
  }

  50% {
    top: 308px;
    left: 273px;
  }
}

//JQuery

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

  });

My animation currently works, when :hover is triggered. I would instead like to initiate the animation on a button click but I don't know how to interact with the CSS from JQuery?

//CSS

.mouth{
  top: 268px;
  left: 273px;
  position: relative;
}

.frame:hover .mouth {
  animation-name: talk;
  animation-duration: 0.75s;
  animation-iteration-count: 5;
}

@keyframes talk {
  0%, 100%{
    top: 268px;
    left: 273px;
  }

  50% {
    top: 308px;
    left: 273px;
  }
}

//JQuery

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

  });

• javascript
• jquery
• css

• 1 Cna you add the HTML ? – Troyer Commented Jan 25, 2017 at 14:23

6 Answers 6

Replace the :hover with with another class, and add this class to the clicked item with jQuery.
This way, when clicking, the new class will be added and the condition will be met, which triggers the animation.

This is pretty straight forward. You'll need to modify your CSS a little, however.

Instead of using the :hover selector, you'd want to make this a new class, let's say .StartAnimation. So your CSS bees

.StartAnimation .mouth{
    animation-name: talk;
    animation-duration: 0.75s;
    animation-iteration-count: 5;
 }

Then, in your JQuery, we simply add (and/or remove) this class:

$('#getQuote').click(function() {
    $('.frame').addClass('StartAnimation');
    // or toggle it, if a second click should undo the animation
    // $('.frame').toggleClass('StartAnimation');
});

Another way to do this, if you want to keep the hover effect, don't want to change your CSS, but still want to animate on a button click as well (maybe when the user clicks something else), would be to use the .trigger() method in JQuery: http://api.jquery./trigger/

$('#getQuote').click(function(){
    $('.frame').trigger('mouseenter');
});

Add a class to start the animation, but listen to animationend event to remove the added class so the animation can be started again.

$('#getQuote').click(function() {
  $('.mouth').addClass('animate');
});
$('.mouth').one('animationend', function(ev) {
  $('.mouth').removeClass('animate');
});

.mouth{
  top: 268px;
  left: 273px;
  position: relative;
  
  width: 100px;
  height: 100px;
  background-color: red;
}

.mouth.animate {
  animation-name: talk;
  animation-duration: 0.75s;
  animation-iteration-count: 5;
}

@keyframes talk {
  0%, 100%{
    top: 268px;
    left: 273px;
  }

  50% {
    top: 308px;
    left: 273px;
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mouth"></div>
<button id="getQuote">Get Quote</button>

very simple:

$('.mouth').css({
 '<css property>':'<value>',
 '<css property>':'<value>',
 '<css property>':'<value>'...
});

I would use a CSS class, as so:

.mouth.animated {
    animation-name: talk;
    animation-duration: 0.75s;
    animation-iteration-count: 5;
}

and the JS:

$( "#getQuote" ).click(function() {
    $(this).prop('disabled', true); // disabling so animation can't be restarted until done
    $(".mouth").addClass("animated");
    setTimeout(function(){
        $( "#getQuote" ).prop('disabled', false);
        $(".mouth").removeClass("animated");
    }, 750*5)
});

Generally i used to do something like this:

//css
.animation{
   ......
}

//jquery
var animTimeout;
$('#getQuote').click(function() {
    clearTimeout(animTimeout);
    $('.mouth').addClass('animation');
    animTimeout = setTimeout(function(){
        $('.mouth').removeClass('animation');
    }, 'animation duration in ms')
});