jquery slidein左右多个元素，然后再出来和循环

我想实现某种类型的动画，但我肯定我有这一切都错了。jquery slidein左右多个元素，然后再出来和循环

我会什么，我想实现启动：

我有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>

任何有关此插件的帮助或建议，将不胜感激。

来源

2017-08-08 mobius2000

只是简单的评论你正在使用的CSS。 'left'需要指定使用什么测量单位，例如'left：500px'。我很确定你不应该使用'不透明'：'隐藏'。最后阅读动画功能; http://api.jquery.com/animate/它还告诉你如何在完成动画之后触发一个新函数;）。希望能帮助到你。 – RMo

您的代码中很少有问题，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);

你需要弄清楚在幻灯片和滑出逻辑。

来源

2017-08-08 05:58:33

jquery slidein左右多个元素，然后再出来和循环

回答

相关问题