jQuery setInterval 与 chrome 中的 fadeIn、fadeOut 错误？

Question

我要疯狂地想弄清楚这个问题。在我网站的主页上，我有一个滑块，当前有四个项目（html 是动态创建的，因此该解决方案必须适用于任意数量的项目）。这些项目绝对位于彼此之上。该脚本可以执行两件事：

1）当单击滑块导航项（这是一个锚链接）时，当前导航项淡出，新导航项淡入（交叉淡入淡出）。

2) 如果用户没有单击任何导航项，滑块将自动前进到下一个项。

当我尝试使用 setInterval 时，我的问题仅出现在 Chrome 中。当我这样做时，交叉淡入淡出不起作用，传出的容器淡出为白色，然后传入的容器突然出现（没有褪色）。

这是我的代码。希望有一些想法，因为我已经尝试了一切！

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

    }

}

Answer 1

这不会解决问题（也许？）

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

应该是（最佳实践）

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

另外为什么不只使用插件呢？ http://css-tricks.com/3412-anythingslider-jquery-plugin/

Answer 2

我遇到了 jQuery 交叉淡入淡出问题，当 HTML 无效时，元素会突然完全按照您所描述的方式显示。通过验证器运行页面并更正所有语法问题，然后查看问题是否仍然存在。

我遇到过好几个这样的问题。 jQuery 似乎对有效的 HTML 有着强烈的偏好。