Manipulating CSS animations through JQuery

Question

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using 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

Answer 1

Answer №1

Swap out the :hover pseudo-class with a different class, then use jQuery to apply this new class to the element that was clicked.
By doing this, we ensure that when an item is clicked on, the extra class is included and the necessary conditions are met to activate the animation.

Answer 2

Swap out the :hover pseudo-class with a different class, then use jQuery to apply this new class to the element that was clicked.
By doing this, we ensure that when an item is clicked on, the extra class is included and the necessary conditions are met to activate the animation.

Answer 3

Answer №2

It's a simple process to achieve this effect. You will have to make some adjustments to your CSS code.

Instead of relying on the :hover selector, create a new class such as .StartAnimation. Update your CSS accordingly:

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

To apply or remove this class using JQuery, you can do the following:

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

If you still want the hover effect but also need to trigger the animation with a button click, you can use the .trigger() method in JQuery. More information can be found here: http://api.jquery.com/trigger/

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

Answer 4

It's a simple process to achieve this effect. You will have to make some adjustments to your CSS code.

Instead of relying on the :hover selector, create a new class such as .StartAnimation. Update your CSS accordingly:

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

To apply or remove this class using JQuery, you can do the following:

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

If you still want the hover effect but also need to trigger the animation with a button click, you can use the .trigger() method in JQuery. More information can be found here: http://api.jquery.com/trigger/

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

Answer 5

Answer №3

To initiate the animation, add a class and then use the animationend event to remove the added class so the animation can be triggered 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>

Answer 6

To initiate the animation, add a class and then use the animationend event to remove the added class so the animation can be triggered 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>

Answer 7

Answer №4

Here's an easy way to do it:

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

Answer 8

Here's an easy way to do it:

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

Answer 9

Answer №5

To implement the talking animation, I recommend using a CSS class like this:

.smile.animated {
    animation-name: chatter;
    animation-duration: 0.75s;
    animation-iteration-count: 5;
}

For the JavaScript portion:

$( "#generateSmile" ).click(function() {
    $(this).prop('disabled', true); // Disabling to prevent animation from being restarted
    $(".smile").addClass("animated");
    setTimeout(function(){
        $( "#generateSmile" ).prop('disabled', false);
        $(".smile").removeClass("animated");
    }, 750*5)
});

Answer 10

To implement the talking animation, I recommend using a CSS class like this:

.smile.animated {
    animation-name: chatter;
    animation-duration: 0.75s;
    animation-iteration-count: 5;
}

For the JavaScript portion:

$( "#generateSmile" ).click(function() {
    $(this).prop('disabled', true); // Disabling to prevent animation from being restarted
    $(".smile").addClass("animated");
    setTimeout(function(){
        $( "#generateSmile" ).prop('disabled', false);
        $(".smile").removeClass("animated");
    }, 750*5)
});

Answer 11

Answer №6

My typical approach to this situation is as follows:

//CSS
.animation{
   ......
}

//JavaScript (using jQuery)
var animationTimer;
$('#getQuote').click(function() {
    clearTimeout(animationTimer);
    $('.mouth').addClass('animation');
    animationTimer = setTimeout(function(){
        $('.mouth').removeClass('animation');
    }, 'duration of animation in milliseconds')
});

Answer 12

My typical approach to this situation is as follows:

//CSS
.animation{
   ......
}

//JavaScript (using jQuery)
var animationTimer;
$('#getQuote').click(function() {
    clearTimeout(animationTimer);
    $('.mouth').addClass('animation');
    animationTimer = setTimeout(function(){
        $('.mouth').removeClass('animation');
    }, 'duration of animation in milliseconds')
});

Manipulating CSS animations through JQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Click twice on the editable AngularJS table to wrap each item

Troubleshooting: Issue with Ajax Post Request in Django Version 1.10.5

Turn off images using Selenium Python

The Jquery calculation is giving unexpected results by returning NaN instead of an integer

Load data into data tables through AJAX request

Issue: Module '@angular/compiler' not found

Can the value in a JavaScript object be updated dynamically when a button is clicked?

Challenges Associated with Promises in JavaScript

Error in MEAN CRUD operation cannot be determined

Can Vuejs functions be triggered using a jQuery event trigger?

Display upon hovering, conceal with a button located within a popup container

Leaflet Alert: The number of child elements is not the same as the total number of markers

Sending AJAX data from VIEW to CONTROLLER in PHP (MVC) using AJAX: A step-by-step guide

What's the method for positioning the footer at the bottom of the grid without impacting the layout of the other rows?

Hide other dropdown when one dropdown is clicked

Unlocking the potential: Clicking on all ng-if elements with matching text using Chrome console

Automatically changing the color of the navigation bar text

Cannot extract the 'name' property from 'e.target' because it is not defined

HashId plugin for Angular

What could be causing the jQueryUI dialog to malfunction in IE9?