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/

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

1 个答案: