淡入淡出並停在鼠標懸停上

我正在處理小動畫，其中的鏈接將具有淡入淡出效果，但有一些延遲，但當用戶在鏈接上移動鼠標時，它應該停止並在鼠標移出後再次開始動畫。淡入淡出並停在鼠標懸停上

當前當鏈接2或更多鏈接上的用戶移動鼠標開始取消並最終停止時。

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'));

}）;

來源

2015-08-26 K.P

嘗試使用動畫的CSS3方法還是必須是JavaScript解決方案會好嗎？ – Aziz

對不起，我不能使用css3接近。它應該是JavaScript或jQuery解決方案。 –

我認爲用setTimeout創建一個函數可以幫助..然後你可以「清除」懸停事件的超時 – Aziz

這是我的解決方案 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(); 
});

所以，我決定使用動畫，而不是使用淡入和淡出，的setInterval（+資訊http://www.w3schools.com/jsref/met_win_setinterval.asp）和類「當前」的李HTML元素知道魔女李是當前可見的。

PS：

對於變化，李仍然可見變化的setInterval的時間。爲了使動畫更加快速或慢速改變動畫中fadIn和fadout函數的時間

對代碼有任何懷疑，請問！

來源

2015-08-26 14:13:20

淡入淡出並停在鼠標懸停上

回答

相關問題