jQuery hover flicker problem with IE 7/8

[johnuk]

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
						intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
						jQuery('#previewId' + intId.substr(6)).show();
					});
				},
				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
							intId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
							jQuery('#previewId' + intId.substr(6)).hide();
						});
					}
				});
				
			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,

[johnuk]

Anyone at all?

[johnuk]

p.s. here is my markup:

<div id="postId<?echo$post->ID;?>" class="postContainer">
							<!-- Post Preview canvas -->
								<div id="previewId<?echo$post->ID;?>" class='postPreview'>
									<!-- Post preview Title -->
									<div class="previewTitle">
										<?
											$thetitle = $post->post_title; //Get post title
											$getlength = strlen($thetitle);
											$thelength = 35;//Set max title length
											echo substr($thetitle, 0, $thelength); //Output title
											if ($getlength > $thelength)
											{
												echo "..."; //Output trailing dots
											}	
										?>
									</div>
									<!-- Post preview Body -->
									<div class="previewBody">
										<?wp_trim_excerpt(the_excerpt());?>
									</div>
								</div>
								<a href="<?echo the_permalink();?>"> 
									<?the_post_thumbnail(); ?>
								</a>
							</div>