Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Issue on Re-animating a div in CSS and jQuery

Issue on Re-animating a div in CSS and jQuery

Problem

Can you please take a look at This Demo and let me know that why I am not able to re-animate the animation after one click. the css rules and jquery works only for First time click.

.animatetop { height:250px; width:250px; background-color:#FFCC33 } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); animation-delay:2s; } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); animation-delay:2s; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); animation-delay:2s; } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-delay:2s; } $(document).ready(function () { $("#clicker").on("click", function () { // alert( "man nemidanam" ); $('.animatetop').addClass('animated fadeInUp'); }); });
Problem courtesy of: user1760110

Solution

You can only add a class to an object once. Once it is there, adding it again does nothing. You'll have to remove the classes animated fadeInUp once the animation completes.

One way to do this is with setTimeout():

$(document).ready(function () {
    $("#clicker").on("click", function () {
        // alert( "man nemidanam" );
        $('.animatetop').addClass('animated fadeInUp');
        setTimeout(function(){

            $('.animatetop').removeClass('animated fadeInUp');

        }, 1500);
    });
});

JSFiddle

Solution courtesy of: David

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Issue on Re-animating a div in CSS and jQuery

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×