CODEWITHSUNDEEP
javascriptjqueryslidetogglecontinuous
user2352183
user2352183

Reputation:

How to execute the next click only when previous click finish?

My HTML:

<div>
    <p>Testing Paragraph</p>
    <span>Testing Span</span>
    <div class="content">This is the main content of this div</div>
</div>

My jQuery:

$('p').click(function () {
    $(this).parent().find('.content').slideToggle('slow');
});

Fiddle: http://jsfiddle.net/Vs5DX/

As you can see from the demo, the content will slide up and slide down when you click the paragraph. The problem is that if I click the paragraph for many times very fast then it's continuously going up and down without clicking.

I've tried:

$(this).parent().find('.content').stop(true).slideToggle('slow');

But it's even worse when the animation stop going. Any ideas?

Upvotes: 2

Views: 181

Answers (2)

Mihai Alin
Mihai Alin

Reputation: 89

Start with a variable:

varClicked = false;

on slideDown make it as true, allow slideUp only if it is true, on SlideUp, make it false again

Upvotes: 0

Eli
Eli

Reputation: 14827

You can use :not to exclude the current :animated elements:

$('p').click(function () {
    $(this).parent().find('.content:not(:animated)').slideToggle('slow');
});

Updated Fiddle

Upvotes: 1

Related Questions