jQuery的淡入/淡出：不退色動畫

Question

我有兩個導航箭頭（透明的PNG），該淡入/淡出懸停（使用jQuery淡入（）和淡出（）），放置在一個jQuery週期幻燈片。問題在於，它並不是衰落，而是在延遲期間「延遲」，然後突然隱藏或顯示（不平滑淡化）。

這是在Safari /火狐/ 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; 
}