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

明白了。

已移除

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

並替換為：

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