jQuery fadein/fadeout on hover causes window bounce
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!)
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.
精彩评论