Controlling CSS animations using JQuery

Question

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() {

  });

Cna you add the HTML ?

Troyer
– Troyer

2017-01-25 14:23:42 +00:00
Commented Jan 25, 2017 at 14:23 — Troyer
– Troyer, Commented Jan 25, 2017 at 14:23

Antony · Accepted Answer · 2017-01-25 14:23:42Z

4

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.

answered Jan 25, 2017 at 14:23

Antony

1,27311 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cruiser · Accepted Answer · 2017-01-25 14:51:38Z

2

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 becomes

.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.com/trigger/

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

edited Jan 25, 2017 at 14:51

answered Jan 25, 2017 at 14:29

Cruiser

1,6162 gold badges16 silver badges20 bronze badges

1 Comment

Emilio Venegas Over a year ago

You're adding the StartAnimation class to the button, not the .frame

Giladd · Accepted Answer · 2017-01-25 14:34:50Z

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mouth"></div>
<button id="getQuote">Get Quote</button>

Fanyo SILIADIN · Accepted Answer · 2017-01-25 14:25:55Z

1

very simple:

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

answered Jan 25, 2017 at 14:25

Fanyo SILIADIN

7925 silver badges11 bronze badges

Comments

Emilio Venegas · Accepted Answer · 2017-01-25 14:47:52Z

1

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

answered Jan 25, 2017 at 14:47

Emilio Venegas

5565 silver badges23 bronze badges

Comments

Vanojx1 · Accepted Answer · 2017-01-25 14:37:24Z

0

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

edited Jan 25, 2017 at 14:37

answered Jan 25, 2017 at 14:31

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

Collectives™ on Stack Overflow

Controlling CSS animations using JQuery

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related