jQuery fadeIn / fadeOut: анимация не исчезает - PullRequest
Новая
       14

jQuery fadeIn / fadeOut: анимация не исчезает

0 голосов
/ 08 февраля 2012

У меня есть две навигационные стрелки (прозрачные pngs), которые постепенно исчезают (используя 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/

1 Ответ

2 голосов
/ 08 февраля 2012

Во время затухания .slide-nav не видно, потому что элемент остается ниже слайд-шоу.

Вы можете использовать этот код CSS, чтобы .slide-nav оставался над слайд-шоу: 

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