CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Argus
Argus

Reputation: 150

jQuery overlapping issue with animation

The whole problem is that I have a header that is fixed and there's a div under it that I need to move accordingly. Though there is a problem if I click really fast like 3 or 4 times one of the animations messes up and I end up having the 'under' div inside the content. I use stop before animating and sliding. I tried using queue and such.. No avail.

$(".header").click(function () {

    $header = $(this);
    $content = $header.next();
    $content.stop().slideToggle(500, function () {
    if(($('.lol').css('margin-top')) == '47px')
{
$(".under").stop().animate({'margin-top': "100px"}, 500)
}
else
{
$(".under").stop().animate({'margin-top': "47px"}, 500)
}
    });
});

https://jsfiddle.net/zddzvxLy/8/

Here's jsfiddle to show the problem. Try clicking on the header a few times really fast and 'This one must be under" will appear inside CONTENT.

Upvotes: 1

Views: 989

Answers (2)

slash197
slash197

Reputation: 9034

Avoid calling animate() when the element is already being animated:

if ($('.content').is(':animated') === false)
{
    // animate
}
else
{
    return false;
}

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

Firstly, you have no item with the class .lol - change that to .under

Secondly, change your stop() calls to stop(true, true)

Thirdly, I would take your animation call for .under out of the completed function and call it in parallel with your first animation.

https://jsfiddle.net/zddzvxLy/10/

Upvotes: 1

Related Questions