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);

Jquery动画飞出并重新进入

1 个答案: