jQuery setInterval с fadeIn, ошибка fadeOut в chrome? - PullRequest
Новая
       29

jQuery setInterval с fadeIn, ошибка fadeOut в chrome?

2 голосов
/ 02 апреля 2011

Я схожу с ума, пытаясь понять это. На главной странице моего сайта у меня есть слайдер, который в настоящее время имеет четыре элемента (HTML создается динамически, поэтому это решение должно работать для любого количества элементов). Эти предметы расположены абсолютно друг над другом. Скрипт может делать две вещи:

1) При щелчке на элементе слайдера-навигации (который является якорной ссылкой) текущий элемент навигации исчезает, а новый - (перекрещивается).

2) Если пользователь не нажимает какие-либо элементы навигации, ползунок автоматически переходит к следующему элементу.

Моя проблема возникает только в Chrome, когда я пытаюсь использовать setInterval. Когда я делаю это, перекрестное затухание не работает, и исходящий контейнер исчезает до белого цвета, и затем появляется контейнер, входящий просто внезапно (без затухания).

Вот мой код. Надеюсь на некоторые идеи, потому что я все перепробовал! 

jQuery(document).ready(function() {

    jQuery('.slider-item:first').show();
    jQuery('.slider-nav-item').click(function () { 


        if (!jQuery(this).hasClass("activeSlide")) {


            clearInterval(s);
            s = setInterval ( "nextSlide()", 6000 );

            currentSlider = jQuery(this).attr("rel");

            jQuery('#slider .slider-item').fadeOut(1200);
            jQuery('#slider .slider-item:nth-child('+ currentSlider+')').fadeIn(1200);

            jQuery('.slider-nav-item').removeClass("activeSlide"); 
            jQuery(this).addClass("activeSlide");

        }

        return false;
     });

    var s = setInterval ( "nextSlide()", 6000 );


});


function nextSlide (){

    var max = jQuery('#slider-nav .slider-nav-item').length;

    var currentSlider = jQuery('.activeSlide').attr("rel");

    if (currentSlider == max) {

        jQuery('#slider .slider-item:nth-child('+currentSlider+')').fadeOut(1200);
        jQuery('#slider .slider-item:first').fadeIn(1200);

        jQuery('.slider-nav-item').removeClass("activeSlide"); 
        jQuery('.slider-nav-item:first').addClass("activeSlide");

    } else {

        var temp = parseInt(currentSlider) + 1;

        jQuery('#slider .slider-item:nth-child('+currentSlider+')').fadeOut(1200);
        jQuery('#slider .slider-item:nth-child('+temp+')').fadeIn(1200);

        jQuery('.slider-nav-item').removeClass("activeSlide"); 
        jQuery('#slider-nav .slider-nav-item:nth-child('+temp+')').addClass("activeSlide");

    }

}

Ответы [ 2 ]

2 голосов
/ 04 августа 2011

Это не решит проблему (возможно?) 

var s = setInterval ( "nextSlide()", 6000 );

должно быть (лучшая практика) 

setInterval ( function(){
  nextSlide();
}, 6000 );

Кроме того, почему бы просто не использовать плагин? http://css -tricks.com / 3412-anythingslider-JQuery-плагин /

0 голосов
/ 19 августа 2011

У меня были проблемы с перекрестными затуханиями jQuery, когда элементы внезапно появлялись в точности так, как вы описали, когда HTML был недействительным.Пропустите страницу через валидатор, исправьте все проблемы с синтаксисом и посмотрите, сохраняется ли проблема.

У меня было несколько подобных проблем.Кажется, jQuery предпочитает корректный HTML.

...