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 answer：

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

所以我认为你最好的选择就像@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 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'); 
    });
});

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

3 个答案: