[英]How I can decrease and make better my ugly JavaScript code?
我试图使用$(this).next()
来控制最接近的兄弟姐妹。 但是在这个范围内,没有看到下一个兄弟姐妹。 如果我使用.each()
函数,则该操作将应用于数组中的所有元素,但它们将同时执行。 我希望看到每个动画都播放完之后再播放另一个动画。 我想使用.on()
和.trigger()
函数,但是我不知道如何实现它们。
$('h1.main-logo-text').show().letterfx({
"fx":"grow",
"element_end":"destroy",
"backwards":false,
"timing":100,
"fx_duration":"1000ms",
onElementComplete: function(){
$('#logoText1').show().letterfx({
"fx":"grow",
"element_end":"destroy",
"backwards":false,
"timing":100,
"fx_duration":"1000ms",
onElementComplete: function(){
$('#logoText2').show().letterfx({
"fx":"grow",
"element_end":"destroy",
"backwards":false,
"timing":100,
"fx_duration":"1000ms",
onElementComplete: function(){
$('#logoText3').show().letterfx({
"fx":"grow",
"backwards":false,
"timing":100,
"fx_duration":"1000ms",
});
}
});
}
});
}
});
您可以定义一个函数来调用每个元素。 上一个动画完成后,使用.queue()
和.promise()
来执行下一个动画
var elems = ["h1.main-logo-text", "#logoText1", "#logoText2", "#logoText3"];
function fx() {
return this.show().letterfx({
"fx":"grow",
"element_end":"destroy",
"backwards":false,
"timing":100,
"fx_duration":"1000ms"
}).promise("fx")
}
$({}).queue("_fx", $.map(elems, function(el) {
return function(next) {
fx.call($(el)).then(next)
}
})).dequeue("_fx").promise("_fx")
.then(function() {
console.log("complete")
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.