jQuery fadein/fadeout on hover causes window bounce

Question

Just started using fadein/fadeout - it's functioning but with problems. I have a set of div's containing links (ie '#linki'). The id of each 'link' div is targetted so that hover on/off on the link text causes images/text in a second set of stacked div's (ie '#webshoti') to undergo fadein + fadeout response. So basically my page code holds a set of 10 #link div's (inside 'linkWrapper' div), 10 #webshot div's (all occupying the same position inside 'webshots' div) and 10 instances of the jQuery script:

eg of html for #link div:

<div class="linkList1"><a href="http://www.fmc.gov.au/">Federal Magistrates Court</a></div>

eg of #webshot div:

#webshot1{
position:absolute;
right:30px;
width:500px;
height:322px;
display:none;

eg of jQuery script:

$(function(){
$('.linkList1').mouseenter(
function(){
$('#webshotText').fadeOut(200, function(){
$('#webshot1').fadeIn(450);
});
}
);
$('.linkList1').mouseleave(
function(){
$('#webshot1').fadeOut(20);
}
);
});

(note that #webshotText is displayed on page load, until any of the #link div's are hovered)

This web page can be viewed HERE

The problem: (1.) hovering down the list of 'link' divs causes window to jump (hey look - it's jQuery Bounce! Doh). (2.) in some cases the image in #webshot which is targetted by currently hovered #link appears to load while the previously targetted #webshot image is still unloading, causing incoming image to be (momentarily) stacked under bottom edge of outgoing image.

I tried setting the mouseout>fadeout to a short time (was 200ms) but no change. I've applied a jQuery image preloader in code but no change. Happens in windows/FF4 and IE8

Any suggestions? Thanks heaps, Kirk (** bonus points if there's any way I could employ array scripting to avoid need for 10 instances of jQuery script!)

marcosfromero marcosfromero · Accepted Answer · 2011-04-07T03:44:27

This fiddle (made to answer this question) can help:

The idea is to:

Draw everything you need with regular HTML
Absolute position every image you want to fade-in / fade-out
Apply fade effects without worrying of stacking effect (they are now absolute-positioned!).

Hope this helps.

jQuery fadein/fadeout on hover causes window bounce

1 Answers