Text flickers using FadeTo on sibling element
I am working on a small hover effect for a menu structure. I want to add and fade in a div with an image background which is positioned under an <a>-tag with text in it.
The problem appears when the fading effect ends: The Text flickers. I tried a few configuration options and different approaches. When I just fadeTo opacity 0.99 or anything below 1, the text is just positioned behind the div element.
Does anyone know a workaround?
The JS Code:
-
$(document).ready(function() {
$("li.row").hover(function(){
$(this).prepend('<div class="hover-panel">');
$(this).find(".hover-panel").stop().fadeTo("fast", 0.9);
},
function () {
$(this).find(".hover-panel").stop().fadeTo("fast", 0.01, function(){
$(this).remove();
});
}
);
});
The HTML markup:
-
<ul>
<li class="row row-first">
<a class="otd-panel-link" href="website">
</a>
</li>
<li class="row row-even">
<a class="otd-panel-link" href="website">
</li>
<li class="row row-last">
<a class="otd-panel-link" href="website">
</li>
</ul>
The CSS Formatting of the inserted element
-
ul li.row div.hover-panel
{
float: left;
width: 100%;
height: 74px;
background: url(images/gradient-white-panel.png) no-repeat;
margin-bottom: -74px;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}