CODEWITHSUNDEEP
jqueryjquery-animateslidedown
Decent Dabbler
Decent Dabbler

Reputation: 22773

Continue slideDown() after being stopped midway?

How do I let a slideDown() animation continue, after I have previously stopped it (or slideUp()) midway? I believe the fact that it won't, has to do with the fact that slideDown() only acts on elements that are initially hidden. And elements in the midst of these animations are not hidden.

Is there a way to circumvent this behaviour, and have jQuery continue animating after being stopped? (Edit: or if you know of an alternative solution to using slideDown(); that will do as well of course)

Please view my jsfiddle example as well, to see what I'm trying to do.

As for a little background information:
I want to implement this behaviour for form validation messages. I individually slide them down, and after a delay, slide them up again. But if a user resubmits the form quicker than the messages disappear and certain "new" messages are already present and have not finished animating (either sliding up or down), I want to slide them down again.

Upvotes: 1

Views: 446

Answers (3)

Antony
Antony

Reputation: 15106

Indicate whether the slideDown is completed in .data(). If it is not completed due to the stop function, hide it and slideDown again.

See DEMO.

$( 'div' ).hide().slideDown(1000, function() {
    $(this).data("completed", "completed");
});
setTimeout( function() {
    $( 'div' ).stop( true );
}, 500 );
setTimeout( function() {
    if ($('div').data("completed") !== "completed") {
        $( 'div' ).hide().slideDown();
    }
}, 2000 );

Upvotes: 1

Jashwant
Jashwant

Reputation: 29025

Something like this ?

$( 'div' ).hide().slideDown( 1000 );
setTimeout( function() {
    $( 'div' ).stop( true );
    $( 'div' ).hide().slideDown(1000);
}, 500 );

For slideUp() in midway, remove the hide()

$( 'div' ).hide().slideDown( 1000 );
setTimeout( function() {
    $( 'div' ).stop( true );
    $( 'div' ).slideUp(1000);
}, 500 );

Upvotes: 0

asifrc
asifrc

Reputation: 5841

What you'll want to do is to use .stop() before your animation, e.g.

$('#element').stop().slideUp();

Check out jQuery's example at http://api.jquery.com/stop/

And let me know if you need more help or clarification on this :)

Upvotes: 0

Related Questions