1

我创建了一个函数来为一个 div 设置动画，然后在单击时淡化另一个。当我再次单击时，动画将反向运行。该功能有效，但动画部分在没有动画的情况下跳转到其指定点，并且仅在反向运行时才跳转。

我相信左边距是在淡入淡出之前设置的，所以在淡入淡出完成后跳到设定点，但我不知道如何解决这个问题。

我的问题

如何在单击按钮时运行淡入淡出，然后是具有两个不同目标的动画。然后在切换单击以反向运行。jQuery 1.9

var toggle = false;
$('#btn1, #btn2').click(function(){
    $('#CtrCol').animate({marginLeft: toggle ? 251 : 0},{complete: function(){
        $('#LftCol').fadeToggle();
    }}); 
    toggle = ! toggle;
});

我的解决方案

var flag = 0;
$('#btn1, #btn2').click(function() {
    if (flag == 0) {
        $('#LftCol').fadeOut({complete: function(){
            $('#CtrCol').animate({marginLeft: 0});
        }});
        flag = 1
    }
    else if (flag == 1) {
        $('#CtrCol').animate({marginLeft: 251},{complete: function(){
            $('#LftCol').fadeIn();
        }});
        flag = 0
    }
});
4

1 回答 1

1

您可以设置一个标志以了解动画的运行方向并在 .click 函数中检查它

if (flag == "right") // run right anim
  flag = "left"
else // run left anim
  flag = "right"

编辑：保留回调

于 2013-03-17T14:05:36.497 回答