jquery slide In/Out 转换在 IE 或 Firefox 中不起作用

Question

好的，当您进入网站时，它会将内容向下滑动（#wrap），并且在向下滑动时使其显示加载图形（.topnav img）。然后，当您单击 nav(.topnav a) 中的链接时，它会向上滑动内容并再次显示加载图形，但是当这次显示图形时，它会暂停 500 毫秒然后重定向。

这在 IE 或 Firefox 中不起作用，我不确定为什么它不起作用。帮我？还有为什么IE8不支持jquery的fadeIn/fadeOut方法？

jsbin link

IE 和 Firefox 的问题是，当我点击链接时，它不会执行退出动画，而是直接进入链接。

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

你有这个：

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

event 不会在此处的所有浏览器中定义，而是希望 jQuery 将事件对象作为第一个参数传递给 .click() 处理程序，如下所示：

$('.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.

---

顺便说一句，由于您反复使用wrap，因此缓存 jQuery 对象而不是选择器以减少重复工作，如下所示：

var wrap = $('#wrap');

...然后在下面的代码中使用wrap 而不是$(wrap)。