问题
On my site, the boxes are supposed to fade into the description. This works in every browser I've tried except IE10. This is a WordPress site and I use nine plugins. I've tried deactivating all plugins but the hovers still don't work in IE10.
Below is the code I'm using for the hovers:
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 out any important info, please let me know. Thank you.
Edit: The entire code for the filtering/hovers.
// 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();
});
});
回答1:
The problem here is with browser-sniffing code; change Internet Explorer 10's user-agent string* to that of Chrome, and refresh the browser. You'll see that it works just fine.
Scripts are leveraging $.browser.msie and assuming that Internet Explorer 10 is like Internet Explorer 7, 8, and 9 (it's not, it's radically different). The culprit in your situation comes from jQuery QuickSand. Have a look at the following condition:
if ( $.browser.msie && $.browser.version.substr(0,1) < 7 ) {
$sourceParent.html('').append($collection);
return;
}
This test, checking only the first value of the version number will mistakenly identify 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.
Changing Internet Explorer's User Agent String
Press F12 to reveal the Developer Tools. Select Tools > Change user agent string to reveal other ua-string options. Select "Chrome", and refresh the browser to re-issue the HTTP request as "Chrome".
回答2:
You can find out if the .thumbnail objects exist for IE 10 at the time the code is run by inserting this on the line above your current call to .hover:
console.log($('.thumbnail').length);
If this logs a 0 then that would explain why the hover event handlers are never hooked up. For whatever reason, IE 10 thinks those elements don't yet exist at the point where the code is run. Here's an alternative way of binding the events that may 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 does is it sets up a pair of global event handlers that only apply to elements that have the "thumbnail" class name, regardless of whether or not those elements exist at the time this code is first run. If the problem is a matter of timing in IE 10, this may fix it.
来源：https://stackoverflow.com/questions/16004905/jquery-hovers-dont-work-in-ie10-but-works-in-lower-ie-versions