Jquery左右滑动多个元素然后再次退出并循环答案

【问题标题】：Jquery slidein left-right multiple elements then out again and loopJquery左右滑动多个元素然后再次退出并循环
【发布时间】：2017-08-08 04:09:59
【问题描述】：

我正在尝试实现某种类型的动画，但我确信我完全错了。

我将从我想要实现的目标开始：

我有 3 个 H2 标记元素（作为堆栈），第一个 H2 从左到右滑入并在开始时淡入，然后第二个 H2 完成相同的序列，然后是第三个，一旦所有三个元素都被动画化，它们然后分别向右滑出并淡出，然后整个序列循环回到开头。

我已经粗略地尝试了以下方法，但我确信有更好的方法来做到这一点......这是一个真正的新手尝试。

<body>
    <div class="fade-right-1">
        <div class="container">
            <div class="photo-text">
                 <span>All rights to NASA</span>
            </div>
        </div>
    </div>
    <div class="fade-right-2">
        <div class="container">
            <div class="photo-text">
                <span>All rights to NASA</span>
            </div>
        </div>
    </div>
    <div class="fade-right-3">
        <div class="container">
            <div class="photo-text">
                <span>All rights to NASA</span>
            </div>
        </div>
    </div>
</body>
<script>
$(document).ready(function() {
    function animateDivers() {
        $(".fade-right-1").animate({
            left: 200,
            opacity: "show"
        }, 1500);
        $(".fade-right-2").delay(1000).animate({
            left: 200,
            opacity: "show"
        }, 1500);
        $(".fade-right-3").delay(2000).animate({
            left: 200,
            opacity: "show"
        }, 1500);

        $(".fade-right-1,.fade-right-2,.fade-right-3").delay(2000).animate({
            left: 500,
            opacity: "hide"
        }, 1500, animateDivers, 2500);
    }

    animateDivers();
});
</script>

任何关于插件的帮助或建议都将不胜感激。

【问题讨论】：

只是对您正在使用的 css 的快速评论。 left 需要指定您使用的测量单位，例如 left: 500px。我很确定你不应该使用opacity: 'hide'。最后阅读动画功能； api.jquery.com/animate 它还告诉您如何在其中完成动画后触发新功能；）。希望对您有所帮助。

标签： jquery css jquery-animate transitions

【解决方案1】：

您的代码中几乎没有问题，dom 中的 div 已经可见，因此 animate 不会在第一次工作。最初应该隐藏 div。

使用这个css：

.fade-right-1, .fade-right-2, .fade-right-3{
  display:none
}

和js如下：

    function animateDivers() {
        $(".fade-right-1").animate({
            left: "200px",
            opacity: "show",
        }, 1500);
       $(".fade-right-2").delay(1000).animate({
            left: 200,
            opacity: "show"
        }, 1500);
        $(".fade-right-3").delay(2000).animate({
            left: 200,
            opacity: "show"
        }, 1500);

        $(".fade-right-1").delay(3000).animate({
            left: "200px",
            opacity: "hide",
        }, 1500);
       $(".fade-right-2").delay(4000).animate({
            left: 200,
            opacity: "hide"
        }, 1500);
        $(".fade-right-3").delay(5000).animate({
            left: 200,
            opacity: "hide"
        }, 1500);
    }
   animateDivers();
   setInterval(animateDivers, 14000);

你需要弄清楚滑入和滑出的逻辑。

【讨论】：