jQuery fadeIn / fadeOut：无淡出动画
我有两个导航箭头（透明PNG）淡入/淡出（使用jQuery fadeIn（）和fadeOut（））悬停，放置在jQuery Cycle幻灯片上。 问题在于，它并不是衰落，而是在延迟期间“延迟”，然后突然隐藏或显示（不平滑淡化）。
这是在Safari / Firefox / Chrome中。 我甚至不敢在IE中看它。
这里是jQuery代码。 （.cycle（）触发jQuery插件）：
jQuery(document).ready(function($){
//hide the scroll arrows
$('#slide-container .slide-nav').hide();
//cycle the promos
$('#slides').cycle({
fx: 'scrollHorz',
speed: 600,
timeout: 3000,
next: '#slide-next',
prev: '#slide-prev'
});
// show/hide scroll arrows on hover
$('#slide-container').hover(
function(){ $('#slide-container .slide-nav').fadeIn(500); },
function(){ $('#slide-container .slide-nav').fadeOut(500); }
);
});
这里是HTML结构：
<div id="slide-container">
<ul id="slides">
<li>(stuff)</li>
<li>(stuff)</li>
<li>(stuff)</li>
</ul>
<div class="slide-nav">
<a id="slide-prev" href="#">Previous</a>
<a id="slide-next" href="#">Next</a>
</div>
</div>
这是一个指向开发者网站页面的链接。 问题的关键在于何时将鼠标悬停在页面中间的大型幻灯片上：http://client2.studioal.com/
淡入淡出期间，由于元素保持在幻灯片下方，因此不会看到.slide-nav 。
你可以使用这个CSS代码来强制.slide-nav保持在幻灯片之上：
.slide-nav {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
z-index: 50;
}