Jquery设置飞出和飞回动画

关于切换动画有很多问题，但我想不出这一点，这些问题也没有太大帮助

我想做的是让一个英雄单位有4个师。点击后，我希望每个人飞到不同的方向，获得新的内容，然后飞回来。我遇到的问题是，当你第一次单击时，它会飞出，得到更新，然后飞回。然而，第二次，它只是飞了出去，再也没有回来

代码： 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>

$（文档）.ready（函数（）{
$（'feature nav li'）。在（'click'，函数（）{
var item_clicked=$（this.attr（'id'）；
特征（）；
$（'.overview'）。延迟（1000）。队列（函数（）{
功能返回（单击项目）；
});
});
});
函数特性（）{
$（'.overview h1'）。设置动画({
右：“1000px”
}, 300);
$（'.overview.feature left'）。设置动画({
右：“1000px”
}, 700);
$（'.overview.feature right'）。设置动画({
底部：“300px”，
不透明度：“0”
}, 400);
$（'.overview.feature bottom'）。动画({
顶部：“100px”，
不透明度：“0”
}, 400);
}
功能特性返回（单击项）{
$（'.overview h1'）.html（'新标题'）。动画({
右：“0”
}, 300);
$（'.overview.feature left'）.html（'New left Content'）.animate({
右：“0”
}, 500);
$（'.overview.feature right'）.html（'New right Content'）.animate({
底部：“0”，
不透明度：“1”
}, 400);
$（'.overview.feature bottom'）.html（'New bottom Content'）.animate({
顶部：“0”，
不透明度：“1”
}, 400);
}

找到了答案

除去

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

并将其替换为：

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