JQuery hovers do not work in IE10, but work in lower versions of IE

Question

On my site, the boxes should disappear in the description. This works in every browser I tried except IE10. This is a WordPress site and I use nine plugins. I tried to disable all plugins, but freezes still do not work in IE10.

Below is the code that I use to hang:

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

Can someone help me identify the problem? If I left any important information, please let me know. Thanks.

Edit: all code to filter / freeze.

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

Answer 1

The problem here is the browser code; change the line user-agent Internet Explorer 10 * to the Chrome server and update the browser. You will see that it is working fine.

The scripts use $.browser.msie and assume that Internet Explorer 10 is similar to Internet Explorer 7, 8 and 9 (this is not so, it is radically different). The culprit in your situation comes from jQuery QuickSand. Look at the following condition:

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

This test, which checks only the first value of the version number, mistakenly identifies Internet Explorer 10 as version "1", which is clearly less than 7, the supported version.

This was fixed six months ago ; Download the latest version of QuickSand from GitHub.

Change Internet Explorer User Agent String

Press F12 to open Developer Tools. Choose Tools> Change user agent string to open other ua-string options. Select "Chrome" and refresh your browser to resubmit the HTTP request as "Chrome".

Answer 2

You can find out if .thumbnail objects .thumbnail for IE 10 at runtime by pasting this in the line above your current .hover :

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

If it registers a 0 , then this explains why hover event handlers never connect. For some reason, IE 10 believes that these elements do not yet exist where the code is executing. Here's an alternative way to bind events that might work better:

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

What this means is that it installs a pair of global event handlers that apply only to elements that have the class name "thumbnail", regardless of whether these elements exist at the time this code is run. If the problem is related to time in IE 10, this may fix it.