jQuery fadeIn/fadeOut : no fade animation

I have two navigation arrows (transparent pngs) that fade in/out (using jQuery fadeIn() and fadeOut()) on hover, placed over a jQuery Cycle slideshow. The issue is that rather than fading, it appears that they "delay" for the duration of the fade, then just suddenly hide or show (no smooth fade).

This is in Safari/Firefox/Chrome. I haven't even dared looking at it in IE yet.

Here's the jQuery code. (.cycle() triggers the jQuery plugin):

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); }
    );
});

Here's the HTML structure:

<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>

Here's a link to the dev site page. The effect in question is the when you hover over the large slides in the middle of the page: http://client2.studioal.com/

---

During the fade .slide-nav is not seen because the element stays below the slideshow.

You could use this CSS code to force .slide-nav to stay above the slideshow:

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

链接地址: http://www.djcxy.com/p/21388.html

上一篇: jQuery在淡入淡出时显示/隐藏内容

下一篇: jQuery fadeIn / fadeOut：无淡出动画