Перекрывающиеся элементы jQuery, вызывающие мерцание - PullRequest
Новая
       7

Перекрывающиеся элементы jQuery, вызывающие мерцание

1 голос
/ 21 марта 2011

Я разрабатываю «рекомендуемый» раздел для сайта. Идея заключается в том, что при наведении курсора на элемент слева он вызывает появление правой половины.

Это работает, за исключением случаев, когда элементы перекрываются (где-нибудь в центре между красными линиями). Это вызывает мерцание эффекта затухания.

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/

1 Ответ

1 голос
/ 21 марта 2011

проблема заключается в следующем: при добавлении z-индекса 10 к наложенному элементу 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>

, тогда я не вижу никаких мерцаний.

плюс идентификационный код jquery по-другому (но ваш путь также полностью в порядке..) 

$(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*/

тогда ящики должны быть расположены иначе, потому что абсолютная позиция затем начинается с нуля окруженияДив но ...

...