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

Question

首先确定 - 它不是toggle()。

此代码应该像滑块一样工作。 1 Div显示，你点击一个按钮，下一个div显示，点击另一个按钮，第一个div显示。

这项工作到目前为止，但它不起作用倒退。所以这个按钮的作用是显示2nd Div，但是按下我所做的'less'按钮只会让第二个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

你有一个错误的观念有关.delay。

在jQuery文档：

描述：设置一个定时器，以延迟在队列中后面的项的执行。

其参数为：duration [, queueName]。

此外，从SO answer：

延迟（）函数只适用于动作元素

因此，我认为你最好的选择是在排队，为@nicolast说，使用回调。 Here它正在工作。最后的代码是：

$('.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 2

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

$('.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 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'); 
    }); 
});