為什么這個簡單的切換不起作用？

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概念有.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'); 
    });
});