长时间后淡入淡出过渡与其setInterval不同步

Question

我一直试图弄清楚为什么在一个随机数量的循环后，这个函数会在多行而不是一次一行中消失。似乎setInterval不同步。一切看起来都对我来说这是一个问题，以找出我做错了什么。

此外，如果您认为我可以做得更好，这对我和其他人有益，请告诉我，因为我是Jquery的新手。

更新**** 我只希望一次显示的问题是，在随机数量的循环后，它显示不止一次或多次在不同时间褪色。

$(function() {

var items = $('.top-header-fading-headings li');
var index = 0;

items.hide();

function fadingSlider() {


    $(items[index]).fadeIn(4000).fadeOut(4000);
    index++;
    if (index === items.length) {
        index = 0;
    }
}

fadingSlider();
setInterval( fadingSlider, 8000);

}）;

Html：

 <ul class="no-bullet top-header-fading-headings">
        <li><h5>Instant online feedback from outstanding Maths tutors</h5></li>
        <li><h5>Smart assessment, tracking and analysis</h5></li>
        <li><h5>Cutting edge tools for online tuition</h5></li>
    </ul>

Answer 1

使用相反的相关动画方法完成回调来递归调用相同的函数：

$(function () {

    var items = $('.top-header-fading-headings li');
    var index = 0;

    items.hide();

    function fadingSlider() {


        $(items[index]).fadeIn(4000).fadeOut(4000, fadingSlider);//<<<<
        index++;
        if (index === items.length) {
            index = 0;
        }
    }

    fadingSlider();

});

-jsFiddle-

Answer 2

或者在函数内部使用setTimeout：

function fadingSlider() {


    $(items[index]).fadeIn(4000).fadeOut(4000);
    index++;
    if (index === items.length) {
        index = 0;
    }
    setTimeout( fadingSlider, 8000);
}

fadingSlider();

Answer 3

你可以试试回调函数，不需要setInterval，

$(function() {

var items = $('.top-header-fading-headings li');
var index = 0;
items.hide();

function fadingSlider(index) {//pass index as parameter

    $(items[index]).fadeIn(4000).fadeOut(4000, function(){

        fadingSlider((index === items.length - 1)? 0 : ++index); //recursive call
    });

}

fadingSlider(0);//initiate animation    
});