CODEWITHSUNDEEP
javascriptjqueryhtml
hojkoff
hojkoff

Reputation: 205

jQuery slideup casuing multiple slides

I'm looking to use jQuery to slide an element down, wait, then slide it back up.

When I use the following code, it slides down fine, but then when sliding back up it seems to slide up and down multiple times.

HTML:

<div id="area">
    <div id="summary"><p>hello summary</p></div>
    <div id="dropdown">
        <div class="item"><p>hello item</p></div>
        <div id="functions"><p>hello functions</p></div>
    </div>
</div>

<p><a href="#" id="test_add">TEST ADD</a></p>

jQuery:

$("document").ready( function () {
    $("#test_add").bind("click", add_item_annimate)
})

function add_item_annimate() {
     $("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
}

Not really sure why this is happening.

Upvotes: 0

Views: 74

Answers (3)

Keeleon
Keeleon

Reputation: 1422

You didn't have anything preventing a user from clicking on "TEST ADD" multiple times before the animation completed.

if ($("#dropdown").is(':animated')) {
    return false;
}

$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");

Here is a jsfiddle of the working demo.

Upvotes: 0

HarrieDakpan
HarrieDakpan

Reputation: 90

This code should do the trick!

$("document").ready( function () {
            $("#test_add").click( function(){
                $("#dropdown").slideUp("fast").delay(1500).slideDown("fast");
                 //SlideUp and slideDown can be switched.   
            });
            });

Example: http://jsfiddle.net/xcm8n1s3/

Upvotes: 1

Ram
Ram

Reputation: 144689

That's probably because of animation queue, for clearing it you can use the stop method:

$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");

Upvotes: 1

Related Questions