为什么我的元素“交换”动画代码在隐藏第二个元素后没有再次显示第一个元素？

Question

好吧，它不是

toggle()

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

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

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

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

.container {
    width: 400px;
    position: relative;
    height: 200px;
    overflow: hidden;
}

.c1,.c2 {
    width: 400px;
    height: 200px;
    position: absolute;
}

.c1 {
    background: green;
    left: 0;
}

.c2 {
    background: red;
    left: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
    <div class="c1">
            <a class="more" href="#more">More</a>
    </div>
    <div class="c2">
            <a class="back" href="#less">Less</a>
    </div>
</div>

我错过了什么？我怎样才能做到这一点，这样我基本上就不会重复相同的代码两次？

Answer 1

你对

.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 2

这再现作品。 当按下更多按钮时：c1 变为 -100px，之后 c2 变为 0px 当按 less 时：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'); 
    });
});