javascript - 为什么这个简单的切换不起作用？

Question

好的，首先 - 它不是toggle()这样的。

这段代码应该像滑块一样工作。1 div 正在显示，单击一个按钮，下一个 div 显示，单击另一个按钮，第一个 div 显示。

到目前为止，这可行，但向后退却行不通。所以按钮可以显示第二个 div，但点击我制作的“更少”按钮只会使第二个 div 消失，而第一个 div 仍然隐藏。

这是代码：

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-828px" }, 600, 'easeInOutQuint')
        .delay(300, function() {
            $('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "828px" }, 600, 'easeInOutQuint')
        .delay(300, function(){
            $('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

我错过了什么？我怎么能这样做，以便我基本上不会重复相同的代码两次？

Answer 1

您是否尝试过使用回调函数而不是延迟？

$('.more').click(function(){
    $('.c1').animate({ left:"-828px"}, 600, 'easeInOutQuint',function(){
       $('.c2').animate({left:"0px"}, 600, 'easeInOutQuint'); 
    });
});
$('.less').click(function(){
    $('.c2').animate({ left:"828px"}, 600, 'easeInOutQuint',function(){
       $('.c1').animate({left:"0px"}, 600, 'easeInOutQuint'); 
    });
});

Answer 2

你对.delay.

在 jquery 文档中：

描述：设置一个定时器来延迟队列中后续项目的执行。

其参数为：duration [, queueName].

另外，从SO 回答：

delay() 函数仅适用于在元素上排队的操作

所以我认为你最好的选择是，正如@nicolast 所说，使用回调。在这里它正在工作。最后的代码是：

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-400px" }, 600, function() {
            $('.c2').animate({ left: "0px" }, 600);
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "400px" }, 600, function(){
            $('.c1').animate({ left: "0px" }, 600);
        }
    );
});

Answer 3

这重现作品。按下更多时：c1 变为 -100px，然后 c2 变为 0px 当按下更少时：c2 变为 100px，之后 c1 变为 0px

$('.more').click(function() {
    $('.c1')
    .stop()
    .animate({ left: "-100px" }, 600, 'linear')
    .delay(300, function() {
        $('.c2').stop().animate({ left: "0px" }, 600, 'linear'); 
    });
});

$('.less').click(function() {
    $('.c2')
    .stop()
    .animate({ left: "100px" }, 600, 'linear')
    .delay(300, function(){
        $('.c1').stop().animate({ left: "0px" }, 600, 'linear'); 
    });
});