Question

我正在使用jquery ui标签在页面上显示不同的内容。内容中的一个部分是在点击标签后我想要动画（淡入）的几个div。我正在使用绿色摇滚来制作动画片。到目前为止，我能够将div设置为动画，但是当单击另一个选项卡时，我将返回到后续选项卡，div已经存在。如何重新启动动画？

另外，这是否写得正确？有更好的效率吗？

谢谢！小白。

我正在使用'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);
        });

Jquery UI选项卡重新启动动画

1 个答案: