javascript - 淡入淡出并在鼠标悬停时停止

Question

我正在制作小动画，其中链接将具有淡入淡出效果，但会有一些延迟，但是当用户将鼠标移到链接上时，它应该停止并在鼠标移开后再次开始动画。

目前，当用户将鼠标悬停在链接 2 或更多链接上时，开始出现并最终停止。

https://jsfiddle.net/e1fye4uy/3/

function InOut(elem) {
elem.delay()
    .fadeIn(1000)
    .delay(10000)
    .fadeOut(1000,

function () {
    if (elem.next().length > 0) {
        InOut(elem.next());
    } else {
        InOut(elem.siblings(':first'));
    }

}).mouseover(function () {
    //$(this).stop(true, false);
   // $(this).clearQueue();
    elem.stop($(".newsFlash").children('li'), true, false);
}).mouseout(function () {
    if (elem.next().length > 0) {
        elem.clearQueue();
        // elem.finish();
        InOut($(this));
    }
});};$(function () {
$('#content li').hide();
InOut($('#content li:first'));

});

Answer 1

这是我的解决方案 https://jsfiddle.net/e1fye4uy/8/

var doAniamtion = false;
var lis = $("#content li");
var time;
function start(){
    time = setInterval(function(){ 
       next(); 
    }, 2000);
    console.log("start" + time);
}

function stop(){
    console.log("stop " + time)
    clearInterval(time);
}



function next(){
    var lisLength = $(lis).length;
    for(var i=0;i<lisLength;i++)
        if($(lis[i]).hasClass("current"))
        {
            fadOut(lis[i],function(){
                fadIn(((i+1) < lisLength) ? lis[i+1] : lis[0]);
            });
            return;
        }
}

function fadIn(obj, callback){
    $(obj).addClass("current");
    $(obj).animate({
        opacity:1
    },500,function(){

        callback && callback();
    });
}

function fadOut(obj, callback){
    $(obj).addClass("current");
    $(obj).animate({
        opacity:0
    },500,function(){
         $(obj).removeClass("current");
        callback && callback();
    });
}

start();

$("#content").mouseover(function(){
    stop();
});

$("#content").mouseout(function(){
    start();
});

所以，我决定使用动画而不是使用 fadeIn 和 fadeOut，setInterval (+info http://www.w3schools.com/jsref/met_win_setinterval.asp ) 和 li HTML 元素中的类“current”来知道 witch li 当前可见。

附言:

要更改 li 保持可见的时间，请更改 setInterval 时间。 为了使动画更快或更慢，在 fadIn 和 fadout 函数中改变动画的时间

对代码有任何疑问，请提问!