Search code examples
javascriptjqueryanimationjquery-animateeasing

Smoother Animate Up/Down effect on Pull Cord

I am trying to animate a pull cord so on click it animates the 'top' down and then when it reaches the bottom back up to the start position all in one go.

I have created a fiddle for what I'm trying to achieve. http://jsfiddle.net/UUtXP/

However, I want to use easing on it easeOutBounce. Works great going down but then there is a pause between going back up.

Is it possible to do one animation of all the way down the back up on click?

Solution

  • Just put one animate after another: http://jsfiddle.net/maniator/94Dfg/

    JS:

    $('#rope').click(function() {
    $(this).animate({
        top: '-40',
        queue: true,
    }, 1000).animate({
            top: '-155px',
            queue: true
        }, 500);
});​