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

Question

I m working on small animation where the link will have fadein fadeout effect with some delay but when when user moveover his mouse on link it should stop and start animate once again once mouse out.

Currently When user moveover mouse on link 2 or more link start appering and its stop at last.

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

This is my solution 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();
});

So, I decide to use animation instead of use fadeIn and fadeOut, setInterval (+info http://www.w3schools.com/jsref/met_win_setinterval.asp ) and class "current" in the li HTML element to know witch li is current visible.

PS:

For change the time that li remains visible change the setInterval Time. For make the animations more fast or slow change the time in animation inside of fadIn and fadout functions

Any doubt about the code, ask!