Question

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

目前当用户在链接2或更多链接上移动鼠标时，开始显示appering并最终停止。

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();
});

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

<强> PS：

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

对代码有任何疑问，请教！

淡出淡出并停止鼠标悬停

1 个答案: