我正在使用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});
}
});
答案 0 :(得分:0)
非常简单。基本上我有其他标签只是在点击时重新启动时间线,所以如果我回到初始标签,它将重新启动。最重要的是,时间表的使用是必要的。
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);
});