Grow your CSS skills. Land your dream job.

allow one animation at a time with jQuery?

  • # December 13, 2010 at 12:37 am

    How do you allow one animation to be going at a time with jQuery? Otherwise you can just go crazy with your mouse and things will be animating forever. Here’s my code.

    $(document).ready(function() {
    //slides animations
    $(".slide").width(161);
    $(".s1").width(380);
    $(".slide").hover(function() {
    $(this).animate({
    width: "380px"
    }, 200);
    },
    function () {
    $(this).animate({
    width: "161px"
    }, 200);
    });
    });
    Rob
    # December 13, 2010 at 4:28 am

    what you have to do is chain the animations:

    $(".slide").hover(function(){
    $(this).animate( { width:"380px"}, 200 )
    .animate( { width:"161px" }, 200 );
    });

    Have a look here and at the examples towards the bottom of the page :)

    http://api.jquery.com/animate/

    # December 13, 2010 at 4:32 am

    Check out this article.

    # January 30, 2011 at 1:26 am

    Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".