jQuery fadeIn/fadeOut ：无淡入淡出动画

Question

我有两个导航箭头（透明 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/

Answer 1

在淡入淡出期间，看不到 .slide-nav，因为该元素位于幻灯片下方。

您可以使用以下 CSS 代码强制 .slide-nav 停留在幻灯片上方：

.slide-nav {
    position: absolute; 
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 50;
}