Question

This code seems to work perfectly:

window.onhashchange = function(){
    if (!window.location.href.match('#pop')) {
        //alert('go back last');
        $('#main').removeClass('hidden');
        $('.pop').removeClass('pop-ready');
        $('.pop').addClass('pop-hidden');
    }

    /* navigate back after back button */
    if (!window.location.href.match('#secondpage')) {
        $('#pageCont').removeClass('posTwo');
        $('#pageOne').removeClass('hidden');
        $('#pageTwoInner').addClass('hidden'); 

    }
    if (window.location.href.match('#secondpage')) {
        $('#pageCont').addClass('posTwo');

        $('#pageTwoInner').removeClass('hidden'); 
    }
}; 

However when I when I add a delay and queue to one function the code becomes temperamental and sometimes that class is not added:

window.onhashchange = function(){
    if (!window.location.href.match('#pop')) {
        //alert('go back last');
        $('#main').removeClass('hidden');
        $('.pop').removeClass('pop-ready');
        $('.pop').addClass('pop-hidden');
    }

    /* navigate back after back button */
    if (!window.location.href.match('#secondpage')) {
        $('#pageCont').removeClass('posTwo');
        $('#pageOne').removeClass('hidden');
                    /* CHANGE HERE */
        $('#pageTwoInner').delay(200).queue(function(){
            $(this).addClass('hidden'); 
        });
    }
    if (window.location.href.match('#secondpage')) {
        $('#pageCont').addClass('posTwo');

        $('#pageTwoInner').removeClass('hidden'); 
    }
}; 

Answer 1

When using queue(), you have to dequeue the next item or the callback chain will be broken.

There are two ways to achieve this. Either call dequeue() from your callback:

$("#pageTwoInner").delay(200).queue(function() {
    $(this).addClass("hidden").dequeue(); 
});

Or call the next argument passed to your callback:

$("#pageTwoInner").delay(200).queue(function(next) {
    $(this).addClass("hidden"); 
    next();
});