jquery - Jquery animate フライアウトとバックイン

Question

アニメーションの切り替えについて多くの質問がありますが、私はこれを理解できず、それらはあまり役に立ちませんでした.

私がやろうとしているのは、4 つの div を持つヒーロー ユニットを持つことです。クリックすると、それぞれが別の方向に飛んでいき、新しいコンテンツを取得してから戻ってくるようにしたいと思います.しかし、2回目は飛び出して戻ってこない。

コード: 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>