исчезают и исчезают при наведении указателя мыши

Question

Я работаю над небольшой анимацией, где ссылка будет иметь эффект fadein fadeout с некоторой задержкой, но когда пользователь перемещает свою мышь по ссылке, она должна остановиться и начать анимацию еще раз после выключения мыши.

В настоящее время, когда пользователь перемещает мышь по ссылке 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 (+ Информация http://www.w3schools.com/jsref/met_win_setinterval.asp) и класс «ток» в литий HTML элемент, чтобы узнать ведьму ли текущий вид.

PS:

Для изменения времени, что литий остается заметным изменением в setInterval времени. Чтобы сделать анимацию более быстрой или медленной, измените время анимации внутри функций fadIn и fadout

Любые сомнения относительно кода, спросите!