Add a loading gif when element fades out and remove it when new element fades in

Vote count:

0

I have this pagination set up so that when users click on the next arrow (.paging-navigation a), the current set of blog posts fade out and the new set fades in. Sometimes there is a delay while the new set loads in and I want to insert a loading gif there so users know nothing went wrong.

Here is how I have it set up:

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').fadeOut(500, function(){

        // I would like to put in the animation gif here
           and fade it away when the new set of posts
           fade in.

        $(this).load(link + ' #article-list', function() {
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
    });
});

Here is the HTML:

<div id="article-list">
    <img class="loading-list" src="loading.gif" style="display:none">

    (blog posts here)

</div>

I've tried showing/hiding the .loading-list img like this but it didn't work:

$('#article-list').on('click', '.paging-navigation a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $('#news').offset().top - 60
    }, 500);
    $('#article-list').fadeOut(500, function(){
        $('.loading-list').show();                                  <// added
        $(this).load(link + ' #article-list', function() {
            $(this).find('#article-list > *').unwrap().end().fadeIn(500);
        });
        $('.loading-list').hide();                                  <// added
    });
});

Can someone help me out?

asked 2 mins ago

J82

854

Add a loading gif when element fades out and remove it when new element fades in