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选项卡重新启动动画

回答

相关问题