jquery - 使用 .each() 和 setTimeout 适用于第一级动画，但不适用于第二级

Question

我正在尝试制作一个动画，您可以在其中单击页面上唯一的 div，它会依次显示其同级 div。那里有一些动画，包括一个箭头，当它的父 div 淡入时，它会稍微伸出一点——或者，至少，这是它应该做的。

带有文本的 div 按预期工作。但是，第二个箭头在整个父 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/