Question

okay im making it where when you goto the website it slides down the content(#wrap) and as it is sliding down make it where a loading graphic is displayed(.topnav img). then when you click a link in the nav(.topnav a) it slides the content up and again displays the loading graphic, but when the graphic is displayed this time it pauses for 500ms and then redirects.

this is not working in IE or Firefox, and im not really sure why it isnt. help me? also why doesnt IE8 support jquery’s fadeIn/fadeOut method?

jsbin link

The problem with IE and Firefox is when i click the links it doesnt do the exit animation and just goes straight to the link.

$(document).ready(function() {
var wrap = '#wrap';

$(wrap).css(
    'display', 'none' // makes no content viewable
)
$(wrap).slideDown(1000, function() {
    $('.topnav img').fadeOut('fast'); // makes content slidedown and then the loading     image fadeout
});
$('.topnav a').click(function() {
    e.preventDefault();
    linkLocation = this.href;
    $(wrap).slideUp(1000, function() {
        $('.topnav img').fadeIn('fast', pause);
    });
});

function redirectPage() {
    window.location = linkLocation;
}
function pause() {
    setTimeout(redirectPage, 500);
}
});

Answer 1

You have this:

$('.topnav a').click(function() {
    event.preventDefault();
    linkLocation = this.href;
    $(wrap).slideUp(1000, function() {
        $('.topnav img').fadeIn('fast', pause);
    });
});

event won’t be defined in all browsers here, you instead want the event object that jQuery passed as the first argument to the .click() handler, like this:

$('.topnav a').click(function(e) {
    e.preventDefault();
    linkLocation = this.href;
    $(wrap).slideUp(1000, function() {
        $('.topnav img').fadeIn('fast', pause);
    });
});

You can test the fixed version here.

---

As an aside, since you’re using wrap repeatedly, cache the jQuery object instead of the selector for less duplicate work, like this:

var wrap = $('#wrap');

…then just use wrap instead of $(wrap) in your code below.