引起閃爍的jQuery重疊元素

我正在爲網站開發「精選」部分。這個想法是，當將鼠標懸停在左側的某個元素上時，會觸發右半部分的淡入。

除了存在元素重疊（紅線之間中間的任何位置）的情況以外，這是可行的。它會導致淡入效果的閃爍。引起閃爍的jQuery重疊元素

Wireframe

這是功能HTML

<div id="feature"> 
<div id="left-overlay">...Right</div> 
<div id="left-feature"><h2>Left</h2></div> 
<div id="right-overlay">...Left</div> 
<div id="right-feature"><h2>Right</h2></div></div>

這是jQuery的

$('div#left-feature').hover(function() { 
    $('div#left-overlay').stop().css({'z-index' : '10'}).fadeTo('normal', 1); 
}, function() { 
    $('div#left-overlay').stop().fadeTo('normal', 0).css({'z-index' : '-10'}); 
});

任何幫助將非常感激。

我已經添加了鏈路此代碼的演示和它的功能性 - http://jsfiddle.net/jamescallaghan/7rLhS/

來源

2011-03-21 James Callaghan

通過添加z-index：1000左側和右側的功能div，似乎已停止閃爍 - http ：// jsfid dle.net/jamescallaghan/7rLhS/1/ – 2011-03-21 11:32:03

如果這解決了你的問題，你可能需要「回答自己的問題」，並將自己的答案標記爲正確答案。這會讓其他人更容易找到解決這個問題的辦法。 – 2011-03-21 12:21:22

問題以下：同時加入的10的z-index到覆蓋div的其放置在懸停元件上方（因此你不再徘徊）。

的解決方案可能是放置徘徊的div內覆蓋的div：

<div id="feature">  

<div id="left-feature"><h2>Left</h2> 
<div id="left-overlay">...</div> 
</div> 


<div id="right-feature"><h2>Right</h2> 
<div id="right-overlay">...</div> 
</div>

的話，我沒有看到任何閃爍。以不同的方式

加上ID碼的jQuery（但你的方式是完全OK以及..）

$(document).ready(function() { 

$("div#left-overlay, div#right-overlay").hide(); 

$('div#left-feature').hover(function() { 
    $('div#left-overlay').fadeIn(); 
}, function() { 
    $('div#left-overlay').hide(); 
}); 

$('div#right-feature').hover(function() { 
    $('div#right-overlay').fadeIn(); 
}, function() { 
    $('div#right-overlay').hide(); 
}); 
});

，並在CSS，你再不需要：

display:block; /*its a div, and those have block n-e-ways*/ 
opacity:0; /*i do this via jquery, or you make display: none; (for those whithout js)*/ 
-moz-opacity:0; 
filter:alpha(opacity=0); 
z-index: -10; /*no need for swapping z-index*/

的箱子需要被放置不同然後，導致絕對位置，然後開始在周圍的div零，但...

來源

2011-03-21 11:59:28 honk31

引起閃爍的jQuery重疊元素

回答

相關問題