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

使用fadeIn的jQuery setInterval，chrome中的fadeOut bug？

2 个答案: