jquery slideIn/Out transitions wont work IE, or Firefox
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.开发者_如何学C
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);
}
});
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.
精彩评论