开发者

jQuery fadein/fadeout on hover causes window bounce

开发者 https://www.devze.com 2023-02-22 10:21 出处:网络
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 l

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:

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

Hope this helps.

0

精彩评论

暂无评论...
验证码 换一张
取 消