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左右多個元素，然後再出來和循環

回答

相關問題