使用.each（）和setTimeout适用于第一级动画，但不适用于第二级

Question

我试图制作一个动画，您只需单击页面上唯一的div，然后按顺序显示其兄弟div。这里有一些动画，其中包括一个箭头，当它的父分区淡入时，它会稍微扩展一点 - 至少，这是它应该做的。

与文本divs工作正常。但是，第二个箭头在整个父div已经淡入之前完成了它的动画。我一直在使用setTimeout来尝试延迟第二个动画，直到第一个动画完成每个div，但它不按我希望的方式工作。

HTML：

<div id="learning-objs"> 
<div id="objs-button"> 
     <h3>Objective</h3> 
    </div> 
    <div class="hidden lo-item"> 
     <div class="arrow"> 
      <div class="rectangle"></div> 
      <div class="arrow-head"></div> 
     </div> 
     <ul id="lo-objective"> 
      <li class="lo-sub alpha"> 
       <h3>Objective</h3> 
      </li> 
     </ul> 
    </div> 
    <div class="hidden lo-item"> 
     <div class="arrow"> 
      <div class="rectangle"></div> 
      <div class="arrow-head"></div> 
     </div> 
     <ul id="lo-content"> 
      <li class="lo-sub alpha"> 
       <h3>Content</h3> 
      </li> 
     </ul> 
    </div> 
    <div class="hidden lo-item"> 
     <ul id="lo-outcome"> 
      <li class="lo-sub alpha"> 
       <h3>Outcome</h3> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS：

.hidden { 
    display:none; 
} 
#learning-objs { 
    width:100%; 
    position:relative; 
    z-index:0; 
} 
#objs-button { 
    padding:0.5em 0; 
    margin: 1em 0 0 3.5em; 
    position:absolute; 
    z-index:2; 
    transition: background .25s ease-in-out; 
    -moz-transition: background .25s ease-in-out; 
    -webkit-transition: background .25s ease-in-out; 
} 
.objs-button-hover { 
    background:#558448 !important; 
    color:#fff; 
    cursor:pointer; 
} 
#learning-objs .lo-item { 
    width:12em; 
    float:left; 
    position:relative; 
    z-index:1; 
    padding:0 1em; 
} 
#learning-objs .lo-item > ul li { 
    list-style-type:none; 
} 
#learning-objs li.lo-sub.alpha { 
    margin:0 auto; 
padding:0.5em 0; 
} 
#learning-objs li.lo-sub.alpha, #objs-button { 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    background:#88B77B; 
    height:4em; 
    width:10em; 
    text-align:center; 
    border-bottom: none; 
    margin-bottom:1em; 
} 
.arrow { 
    margin: 1em 0 0 12em; 
    position: absolute; 
    z-index: -1; 
} 
.arrow-head { 
    border-right:10px solid black; 
    border-bottom:10px solid black; 
    width:15px; 
    height:15px; 
    transform: rotate(-45deg); 
    margin:25px 0 0 18px; 
    position:absolute; 
    z-index:1; 
} 
.rectangle { 
    width:35px; 
    height:10px; 
    background:#000; 
    position:absolute; 
    z-index:0; 
    margin: 33px 0 0 0; 
} 

的jQuery：

$(document).ready(function() { 
$('#objs-button').hover(function() { 
    $(this).toggleClass('objs-button-hover'); 
}); 
$('#objs-button').click(function() { 
    $('#objs-button').fadeOut(3000).removeClass('objs-button-hover').unbind('mouseenter mouseleave'); 
    $('.lo-item').each(function(i) { 
     var objectiveItem = $(this); 
     setTimeout(function(fadeInDiv) { 
      objectiveItem.delay(fadeInDiv * 3000).fadeIn(1000); 
      setTimeout(function(showArrow) { 
       $('.rectangle').delay(showArrow * 3000).animate({ 
        width: '45px' 
       }, 600); 
       $('.arrow-head').delay(showArrow * 8000).animate({ 
        marginLeft: '28px' 
       }, 600); 
      }, 1000 * i); 
     }, 500 * i); 
    }); 
}); 
}); 

这里是jsfiddle。

我在这里错过了什么？

Answer 1

我认为setTimeout是不是这样。 试用此JavaScript。你觉得呢？

$(document).ready(function() { 
    $('#objs-button').hover(function(){ 
    $(this).toggleClass('objs-button-hover'); 
    }); 
    $('#objs-button').click(function() { 
    $('#objs-button').fadeOut(3000).removeClass('objs-button-hover').unbind('mouseenter mouseleave'); 
    $('.lo-item').each(function(i) { 

     //I change only above 
     var divLoItem = $(this); 
     divLoItem.delay(1000 * i).fadeIn(1000); 
     $('.rectangle', divLoItem).delay(1300 * i).animate({width: '45px'}, 600); 
     $('.arrow-head', divLoItem).delay(1600 * i).animate({marginLeft:'28px'}, 600); 

    }); 
    }); 
}); 

工作正常。我认为。

这里的jsfiddle：https://jsfiddle.net/gydhk62L/