我想迭代一个数组,然后逐渐淡出每个数组。但是如果该数组中的索引应该包含它自己的数组,我希望外部数组停止;然后动画它的内部数组;然后继续。
我提供了jsfiddle
我现在知道它是各种各样的意大利面条,但我打算把它变成一个在if语句中调用另一个函数的函数。但是现在我对如何让它正常停止感到困惑。
$(document).ready(function() {
// start
var elements = $('.switch');
elements.each(function(index) {
var element = $(this);
setTimeout(function() {
element.fadeIn(1000, function() {
if(element.has('.section')){
var innerEls = $('.section');
innerEls.each(function(i) {
// stuff
var inner = $(this);
setTimeout(function() {
element.stop();
inner.fadeIn(1000).delay(2000).fadeOut(1000);
}, 4000 * i);
});
}
}).delay(1000).fadeOut(1000);
}, 2000 * index);
});
});
<div class="switch">This is <div> number 1</div>
<div class="switch">This is <div> number 2</div>
<div class="switch">This is <div> number 3
<div class="section">this</div>
<div class="section">needs to</div>
<div class="section">show</div>
</div>
<div class="switch">This is <div> number 4</div>
<div class="switch">This is <div> number 5</div>
答案 0 :(得分:0)
你可以做到
switchelements(elements);
function switchelements(e){
e.eq(0).delay(1000).fadeIn(1000,function(){
if($(this).children(".section").length>0){
var inner=$(this).children(".section");
switchelements(inner);
}
else{
$(this).delay(1000).fadeOut(1000,function(){
if(e.length>=2){
e.splice(0,1);
switchelements(e);
}else{
if($(this).parent(".switch").next("switch")){
$(this).parent(".switch").delay(1000).fadeOut(1000,function(){
switchelements($(this).nextAll(".switch"));
});
}
}
});
}
});
}