jQuery setInterval与fadeIn，fadeOut在铬中的错误？

Question

我疯了，试图弄清楚这一点。在我的网站的主页上，我有一个滑块，当前有四个项目（HTML是动态创建的，所以此解决方案必须适用于任意数量的项目）。这些物品绝对位于彼此之上。脚本可以做两件事：

1）当单击一个slider-nav-item（这是一个锚点链接）时，当前的导航项淡出，并且新的淡入（交叉淡入淡出）。

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有强烈的偏好。