jquery - Jquery动画飞出并返回

Question

有很多关于切换动画的问题，但我无法弄清楚，而且这些问题并没有太大帮助。

我想要做的是拥有一个有 4 个 div 的英雄单位。单击时，我希望每个人朝不同的方向飞出，获取新内容，然后飞回。我遇到的问题是您第一次单击时，它飞出，获取更新，然后飞回来。但是第二次，它只是飞出去，再也没有回来。

代码： HTML

<ul class="feature-nav">
    <li id="overview" class="text-center"><i class="icon-tasks icon-small"></i>
        <br />Overview</li>
</ul>
<div class="overview">
     <h1>Features</h1>

    <div class="feature-left pull-left">Content here</div>
    <div class="feature-right pull-right">right content</div>
    <div class="clearfix"></div>
    <div class="feature-bottom">bottom content</div>
</div>

jQuery

<script>
    $(document).ready(function () {
        $('.feature-nav li').on('click', function () {
            var item_clicked = $(this).attr('id');
            features();
            $('.overview').delay(1000).queue(function () {
                features_back(item_clicked);
            });
        });
    });

    function features() {
        $('.overview h1').animate({
            right: "1000px"
        }, 300);
        $('.overview .feature-left').animate({
            right: "1000px"
        }, 700);
        $('.overview .feature-right').animate({
            bottom: "300px",
            opacity: '0'
        }, 400);
        $('.overview .feature-bottom').animate({
            top: "100px",
            opacity: '0'
        }, 400);

    }

    function features_back(item_clicked) {
        $('.overview h1').html('New Header').animate({
            right: "0"
        }, 300);
        $('.overview .feature-left').html('New Left Content').animate({
            right: "0"
        }, 500);
        $('.overview .feature-right').html('New right Content').animate({
            bottom: "0",
            opacity: '1'
        }, 400);
        $('.overview .feature-bottom').html('New bottom Content').animate({
            top: "0",
            opacity: '1'
        }, 400);
    }
</script>

Answer 1

Got it figured out.

removed

$('.overview').delay(1000).queue(function () {
    features_back(item_clicked);
});

and replaced it with:

setTimeout(function() {
    features_back(item_clicked);
}, 1000);