jquery UI選項卡重新啓動動畫

我正在使用jquery ui選項卡在頁面上顯示不同的內容。內容中的一部分是點擊標籤後我想動畫（淡入）的幾個div。我正在使用綠色的動畫。到目前爲止，我可以讓div生成動畫，但當另一個選項卡被點擊時，我回到後面的選項卡divs已經在那裏。如何重新開始動畫？jquery UI選項卡重新啓動動畫

此外，這寫的是否正確？有更好的方法嗎？

謝謝！菜鳥。

我使用 'J' 作爲noConflict ...

j(function() { 
     j('#tabs').tabs({ 
      active:0, 
      activate: function(event, ui) { 
      myAnimation(); 

      } 

     }); 

      var tri1 = document.getElementById("tri-one"); 
      var tri2 = document.getElementById("tri-two"); 
      var tri3 = document.getElementById("tri-three"); 
      var tri4 = document.getElementById("tri-four"); 
      var tri5 = document.getElementById("tri-five"); 



     function myAnimation() { 

      TweenMax.to(tri1, .25, {opacity:1, delay:0}); 
      TweenMax.to(tri2, .25, {opacity:1, delay:.25}); 
      TweenMax.to(tri3, .25, {opacity:1, delay:.5}); 
      TweenMax.to(tri4, .25, {opacity:1, delay:.75}); 
      TweenMax.to(tri5, .25, {opacity:1, delay:1}); 
     } 
});

來源

2014-10-02 lnickel

我對greenshock並不熟悉，但問題可能是您在移動到下一個選項卡之前沒有將當前選項卡重置爲pinitial狀態。 [mcve]（http://stackoverflow.com/help/mcve）將會有幫助... – 2014-10-03 07:13:42

漂亮其實很簡單。基本上我有其他標籤只需重新啓動時間線，當他們被點擊，所以如果我回到初始選項卡，它將重新啓動。最重要的是時間軸的使用是需要的。

var tl = new TimelineLite({ 
      delay: 1 
     }); 
     j(".slide a").click(function() { 
      var tr1 = document.getElementById("tri-one"); 
      var tr2 = document.getElementById("tri-two"); 
      var tr3 = document.getElementById("tri-three"); 
      var tr4 = document.getElementById("tri-four"); 
      var tr5 = document.getElementById("tri-five"); 

      tl.add(TweenMax.to(tr1, .5, { 
       top: "0", 
       opacity: 1, 
       ease: Quad.easeOut 
      })); 
      tl.add(TweenMax.to(tr2, .5, { 
       top: "0", 
       opacity: 1, 
       ease: Quad.easeOut 
      })); 
      tl.add(TweenMax.to(tr3, .5, { 
       top: "0", 
       opacity: 1, 
       ease: Quad.easeOut 
      })); 
      tl.add(TweenMax.to(tr4, .5, { 
       top: "0", 
       opacity: 1, 
       ease: Quad.easeOut 
      })); 
      tl.add(TweenMax.to(tr5, .5, { 
       top: "0", 
       opacity: 1, 
       ease: Quad.easeOut 
      })); 
     }); 




j(".info a, .objective a, .chars a, .performance a, .risk a").click(function() { 
      tl.restart(true); 
     });

來源

2014-10-10 19:57:49 lnickel

jquery UI選項卡重新啓動動畫

回答

相關問題