CODEWITHSUNDEEP
jquery
IlludiumPu36
IlludiumPu36

Reputation: 4304

Jquery - divs animate one after the other despite queue false

I have two divs that I'm wanting to animate at the same time. Despite using queue false the divs animate one after the other:

$('.button_top, .button_bottom').click(function() {
    $('.button_bottom').animate({marginTop: "+100px"}, {duration: 500, queue: false});
    $('.button_top').animate({marginTop: "-50px"}, {
    duration: 500, 
    queue: false,
    complete: function() {
opened = true;
    }
    }); 
if(opened == true){
    $('.button_bottom').animate({marginTop: "0px"}, {duration: 500, queue: false});
    $('.button_top').animate({marginTop: "+50px"}, {
    duration: 500, 
    queue: false,
    complete: function() {
opened = false;
    }
});
}
});

See fiddle at http://jsfiddle.net/hBqfQ/

Note that the divs animate together the first time, but not when clicked the second time or afterwards.

Upvotes: 0

Views: 44

Answers (1)

Ryan Mitchell
Ryan Mitchell

Reputation: 744

If you change your code to animate almost any property but marginTop, you'll see that it animates properly: marginLeft, width, etc. all work.

The problem is that as you animate the marginTop of the upper button, you affect thereby the position of the lower button (since changing the marginTop of the upper button affects the space it occupies in the layout). You can see this more clearly if you change the second animation definition to, say, $('.button_bottom').animate({marginTop: "25px"}, {duration: 500, queue: false}); (Or at least that's the closest I can come to an answer. If this is right, I'm not sure why the below solution works.)

Now, I'm a bit fuzzy as to why precisely this fixes it, but if you change the second animation to the following, then your problem goes away:

$('.button_bottom').animate({marginTop: "0px"}, {duration: 500, queue: false});

$('.button_top').animate({marginTop: "0px"}, {
    duration: 500, 
    queue: false,
    complete: function() {
    opened = false;
}

See this working jsFiddle.

Upvotes: 3

Related Questions