4

在我的网站上，这些框应该淡入描述中。这适用于我尝试过的所有浏览器，除了 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

2 回答 2

5

这里的问题在于浏览器嗅探代码。将 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。

这是六个月前修复的；从 GitHub下载最新版本的 QuickSand。

更改 Internet Explorer 的用户代理字符串

按 F12 显示开发者工具。选择Tools > Change user agent string以显示其他 ua 字符串选项。选择“Chrome”，然后刷新浏览器以将 HTTP 请求重新发出为“Chrome”。

于 2013-04-15T01:07:31.063 回答
1

您可以.thumbnail通过在当前调用上方的行中插入此代码来了解在运行代码时是否存在 IE 10 的对象.hover：

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

如果这记录了 a0那么这就解释了为什么悬停事件处理程序永远不会连接。无论出于何种原因，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);
        });

});

这样做是它设置了一对全局事件处理程序，这些事件处理程序仅适用于具有“缩略图”类名称的元素，而不管这些元素在此代码首次运行时是否存在。如果问题是 IE 10 中的时间问题，这可能会解决它。

于 2013-04-14T23:19:13.667 回答