Question

好吧，当你转到网站时，它会向内滑动内容（#wrap），当它向下滑动时，它会显示加载图形（.topnav img）。然后当您单击导航中的链接（.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)。

jquery slide In / Out转换不适用于IE或Firefox

1 个答案: