jquery slideIn / Out переходы не будут работать IE или Firefox

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);
    });
});

Вы можете проверить фиксированную версию здесь .

---

В сторону, так как вы используете wrap несколько раз, кэшируйте объект jQuery вместо селектора для меньшего количества дублирующихся работ, например:

var wrap = $('#wrap');

..., затем просто используйте wrap вместо $(wrap) в приведенном ниже коде.