JQuery UI Tabs Restart Animation

Question

Я использую вкладки jquery ui для отображения различных частей контента на странице. Одна часть содержимого - это несколько div, которые я хочу анимировать (затухать) после нажатия на вкладку. Я использую greensock для анимации. Пока я могу заставить divs анимировать, но когда щелкнула другая вкладка, и я вернусь к следующей вкладке, divs уже есть. Как перезапустить анимацию?

Кроме того, это правильно написано? Есть ли более эффективный способ?

Спасибо! новичок.

Я использую '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}); 
     } 
}); 

Answer 1

Довольно просто. В основном у меня есть другие вкладки, которые просто перезапускают временную шкалу, когда они нажимаются, поэтому, если я вернусь к начальной вкладке, она перезапустится. Самое главное, что нужно использовать временную шкалу.

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); 
     });