Question

我创建了一个函数来动画一个div然后在点击时淡化另一个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
    }
});

Answer 1

你可以设置一个标志来知道在哪个方向上运行动画并在.click函数中检查它

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

编辑：保留回调

如何在jquery 1.9中使用多个目标切换排队效果？

1 个答案: