Question

I’m new to jQuery and JavaScript

I have managed to get a small snippet up and running which changes an item on the home page of my site every 7 seconds. But I’m having a problem with order in which the animations occur.

As coded below I expect that the area display_popin will fade out, get updated, then fade back in. But this doesn’t happen instead the are is updated, then fades out, then fades back in. This confuses me because the order of execution is not the same as my code something I’m not used to in other languages. The current behavior of the site is not desired.

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

I’ve tried inserting a call to jQuery.delay after my fadeOut call and it has no effect. I don’t know if this is an issue with my understanding of jQuery, or javascript, both are new to me. Note I have found several articles on stack overflow which seem similar, the solutions usually involve creating a queue of animations should I be doing that here?

Answer 1

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

By default the code does not wait for an action to finish and when the fadeout is fired, it will continue with the next action, but the fadeout is still going. Above code will wait for fadeOut to finish and then do the rest.