Hi all,
As per the thread title, I am having a small problem with IE 7/8 where by when you hover over a thumbnail, it flickers. My code is as follows:-
function activateThumbnails(intThumbActiveOp, intThumbInActiveOp, intFadeTime, strThumbClass)
{
//Hide image title
jQuery("a " + strThumbClass).attr('title', '');
//Bind effect to post thumbnails..
jQuery(window).bind("load", function() {
var activeOpacity = intThumbActiveOp,
inactiveOpacity = intThumbInActiveOp,
fadeTime = intFadeTime,
clickedClass = "selected",
thumbs = strThumbClass;
jQuery(thumbs).fadeTo(1, inactiveOpacity);
//Animate thumbnail on hover event..
jQuery(thumbs).hover(
function(){
//Fade into thumbnail..
jQuery(this).fadeTo(fadeTime, activeOpacity, function(){
//Display Preview Body once faded in
[COLOR="#FF0000"] intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
jQuery('#previewId' + intId.substr(6)).show();[/COLOR]
});
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!jQuery(this).hasClass(clickedClass))
{
//Fade out of thumbnail..
jQuery(this).fadeTo(fadeTime, inactiveOpacity, function(){
//Hide Preview Body once faded out
[COLOR="#FF0000"]intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
jQuery('#previewId' + intId.substr(6)).hide();[/COLOR]
});
}
});
jQuery(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = jQuery(thumbs + '.' + clickedClass).eq();
var clicked = jQuery(this);
if(clicked !== previous)
{
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});
}
Please note I am laying some preview text over the hover images (see the red block of code), and it is when the cursor is over the preview text (not the image itself) that you get the flicker in IE 7/8 only. This is illustrated by the fact the issue does not happen if there is no textual overlay.
Any help would be really much appreciated as I am on a tight deadline
Kind regards and thanks,