JQuery зависает не работает в IE10, но работает в более низких версиях IE

Question

JQuery зависает не работает в IE10, но работает в более низких версиях IE

На моем сайте коробки должны исчезнуть в описании. Это работает во всех браузерах, которые я пробовал, кроме IE10. Это сайт WordPress, и я использую девять плагинов. Я попытался деактивировать все плагины, но зависания по-прежнему не работают в IE10.

Ниже приведен код, который я использую для парения:

jQuery(document).ready(function($){

$('.thumbnail').hover(function() {
  $('img', this).stop(true,true).fadeTo(100, 0.1);
  $('.description', this).stop(true,true).fadeIn(100);
}, function() {
  $('img', this).stop(true,true).fadeTo(100, 1);
  $('.description', this).stop(true,true).fadeOut(100);
});

});

Может ли кто-нибудь помочь мне определить проблему? Если я пропустил какую-либо важную информацию, пожалуйста, дайте мне знать. Спасибо.

Изменить: весь код для фильтрации / парения.

  // Filter
  $(function() {

    var time_effect = 1000;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });

            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });

    $('.btn_all').click(function(e) {
      $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_identity').click(function(e) {
      $('.all').quicksand( $('.identity article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_web').click(function(e) {
      $('.all').quicksand( $('.web article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_illustration').click(function(e) {
      $('.all').quicksand( $('.illustration article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_print').click(function(e) {
      $('.all').quicksand( $('.print article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });
  });

4

jquery internet-explorer internet-explorer-10 jquery-hover quicksand

Источник

user1536869 14 апр '13 в 22:04

2 ответа

Решение

Вы можете узнать, если .thumbnail объекты существуют для IE 10 во время выполнения кода, вставив его в строку над текущим вызовом .hover:

console.log($('.thumbnail').length);

Если это регистрирует 0 тогда это объясняет, почему обработчики событий hover никогда не подключаются. По какой-то причине IE 10 считает, что эти элементы еще не существуют в момент запуска кода. Вот альтернативный способ привязки событий, которые могут работать лучше:

jQuery(document).ready(function($){

    $(document.body)
        .on('mouseenter', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 0.1);
            $('.description', this).stop(true,true).fadeIn(100);
        })
        .on('mouseleave', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 1);
            $('.description', this).stop(true,true).fadeOut(100);
        });

});

Для этого он устанавливает пару глобальных обработчиков событий, которые применяются только к элементам с именем класса "thumbnail", независимо от того, существуют ли эти элементы во время первого запуска этого кода. Если проблема связана с синхронизацией в IE 10, это может исправить ее.

1

Источник

user24380 14 апр '13 в 23:19

Другие вопросы по тегам jquery internet-explorer internet-explorer-10 jquery-hover quicksand

user54680 15 апр '13 в 01:07 2013-04-15 01:07 · Accepted Answer · 2013-04-15 01:07

Проблема здесь в коде, снимающем браузер; измените строку пользовательского агента Internet Explorer 10 * на Chrome и обновите браузер. Вы увидите, что это работает просто отлично.

Скрипты используют $.browser.msie и предполагая, что Internet Explorer 10 похож на Internet Explorer 7, 8 и 9 (это не так, он радикально отличается). Виновник в вашей ситуации исходит от jQuery QuickSand. Посмотрите на следующее условие:

if ( $.browser.msie && $.browser.version.substr(0,1) < 7 ) {
    $sourceParent.html('').append($collection);
    return;
}

Этот тест, проверяющий только первое значение номера версии, по ошибке идентифицирует Internet Explorer 10 как версию "1", что явно меньше 7, поддерживаемой версии.

Это было исправлено шесть месяцев назад; загрузите последнюю версию QuickSand с GitHub.

Изменение строки агента пользователя Internet Explorer

Нажмите F12, чтобы открыть Инструменты разработчика. Выберите " Инструменты"> "Изменить строку пользовательского агента", чтобы открыть другие параметры строки ua. Выберите "Chrome" и обновите браузер, чтобы повторно выдать HTTP-запрос как "Chrome".