我尝试使用 $(this).next()
将控制权交给最接近的 sibling 。但这个范围下兄弟还没有见过。如果我使用 .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")
})
关于javascript - 如何减少并改进丑陋的 JavaScript 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37086124/