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

Question

首先，它不是一个 toggle() 。

这段代码应该像 slider 一样工作。正在显示 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'); 
    });
});