Question

我是jQuery和JavaScript的新手

我已设法启动并运行一个小片段，每隔7秒更改一次我网站主页上的项目。但我对动画发生的顺序有问题。

如下面的编码，我希望区域display_popin将淡出，更新，然后淡入。但这不会发生，而是更新，然后淡出，然后淡入。让我感到困惑，因为执行顺序与我的代码不同，我不习惯在其他语言中使用。不希望网站的当前行为。

<div class="container bordered" id="display_popin"> 
    {% jinja_include "store/_popin.html" %}
</div>
<script type="text/javascript">

    var update_interval = 7000;

    function update_popin(){



        jQuery.get("/store/random_item/", function(data){

            display = $('#display_popin');
            display.fadeOut(400);
            display.html(data);
            display.fadeIn(400);

            window.setTimeout( update_popin, update_interval );

        });


    }

    $(document).ready(function() {
         window.setTimeout( update_popin, update_interval );
    });

</script>

我尝试在我的fadeOut调用之后插入jQuery.delay的调用，但它没有效果。我不知道这是否是我对jQuery或javascript的理解的问题，这对我来说都是新的。注意我发现有几篇关于堆栈溢出的文章看起来很相似，解决方案通常涉及创建一个动画队列，我应该在这里做什么？

Answer 1

display.fadeOut(400, function(){
    display.html(data);
    display.fadeIn(400);
});

默认情况下，代码不等待操作完成，当fadeout被触发时，它将继续执行下一个操作，但淡出仍在继续。上面的代码将等待fadeOut完成，然后完成剩下的工作。

jQuery动画发生故障

1 个答案: