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>

这是dev网站页面的链接。有问题的效果是当您将鼠标悬停在页面中间的大型幻灯片上时： http://client2.studioal.com/

Answer 1

在淡入淡出期间.slide-nav未见，因为该元素保持在幻灯片放映之下。

您可以使用此CSS代码强制.slide-nav保持在幻灯片放映之上：

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

jQuery fadeIn / fadeOut：没有淡入淡出的动画

1 个答案: