Search code examples
javascriptjqueryslidetogglecontinuous

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?

Solution

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

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

    Updated Fiddle