Question

我有两个div，我想同时制作动画。尽管使用队列假，div仍然一个接一个地动画：

$('.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;
    }
});
}
});

请参阅http://jsfiddle.net/hBqfQ/

小提琴

请注意，div在第一次动画时一起显示，但在第二次或之后点击时不会动画。

Answer 1

如果您将代码更改为动画几乎所有属性（marginTop），您会看到它正常动画：marginLeft，width等都可以正常工作。

问题在于，当您为上部按钮的marginTop设置动画时，会影响下部按钮的位置（因为更改上部按钮的marginTop会影响它在其中占用的空间。布局）。如果你将第二个动画定义更改为$('.button_bottom').animate({marginTop: "25px"}, {duration: 500, queue: false});（或者至少是我能找到最接近答案的那个），你可以更清楚地看到这一点。如果这是对的，我可以不确定为什么以下解决方案有效。）

现在，我有点模糊，为什么要修正它，但如果你将第二个动画更改为以下内容，那么你的问题就会消失：

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

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

请参阅 this working jsFiddle 。

Jquery - 尽管队列错误，仍然一个接一个地动画

1 个答案: