jQuery懸停，改變各種背景與無限循環，直到鼠標不在

我有一個<div>背景圖像，將延遲300ms的背景改變背景4次。我嘗試了setTimeout，它似乎工作正確，但clearTimeout（t）;當鼠標移出失敗時，因爲背景不斷變化。jQuery懸停，改變各種背景與無限循環，直到鼠標不在

$(document).ready(function() { 
    $(".image").hover(function(){ 
     var obj = $('.image'); 
     $(this).css("background-position", "0 -90"); 
     var t=setTimeout(function(){obj.css("background-position", "0 -180")}, 300); 
     var t=setTimeout(function(){obj.css("background-position", "0 -270")}, 600); 
     var t=setTimeout(function(){obj.css("background-position", "0 -360")}, 900); 
    }, function() { 
     $(this).css("background-position", "0 0"); 
     clearTimeout(t); 
    }); 
});

我也想插入到懸停功能的方式有一個無限循環，直到鼠標被釋放。

對不起，我的學校英語。

在此先感謝！

來源

2010-09-11 ipalaus

移動函數外的t var dec。那麼它會在關閉。

例如是這樣的：

$(document).ready(function() { 
    var t1,t2,t3; 

    $(".image").hover(function(){ 
     var obj = $('.image'); 
     $(this).css("background-position", "0 -90"); 
     var t1=setTimeout(function(){obj.css("background-position", "0 -180")}, 300); 
     var t2=setTimeout(function(){obj.css("background-position", "0 -270")}, 600); 
     var t3=setTimeout(function(){obj.css("background-position", "0 -360")}, 900); 
    }, function() { 
     $(this).css("background-position", "0 0"); 
     clearTimeout(t1); 
     clearTimeout(t2); 
     clearTimeout(t3); 
    }); 
});

有與此代碼的其他問題，但我只是回答這個問題。

來源

2010-09-11 15:18:49 Hogan

感謝您的回覆！但我無法讓它工作......不明白爲什麼，但我認爲這不是從一開始就走的路（我的失敗）......我怎樣才能將它定位於一種好方法？提前致謝！ – ipalaus 2010-09-11 16:10:23

你使用過上面的代碼嗎？它在哪些方面不起作用？如果你把問題代碼放在jsfiddle中，那麼幫助你會更簡單。 – Hogan 2010-09-11 17:37:31

我從來沒有用過jsfiddle，但我認爲這是正確的：http://jsfiddle.net/NhpVW/3/ – ipalaus 2010-09-11 18:08:54

因爲這個變量t由前兩個setTimeout小號覆蓋兩次，所以只有最後setTimeout代碼保存的，所以當你調用clearTimeout你只是澄清了最後一個setTimeout。

你可以做的是使用三個不同的變量來存儲它，改爲setInterval，或者使用循環來設置超時。

來源

2010-09-11 15:18:54

@Yi Jiang：謝謝！我怎麼能在發佈之前做出無限循環？ – ipalaus 2010-09-11 15:23:39

你試過jquery's animate？可能會簡化很多事情 - 他們會爲你處理所有的計時器和事情。它被燒入你已經使用的圖書館，爲什麼不利用它呢？

$('.image').mouseover(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(0 -360px)"}, 
     {duration:1800}) 
    }) 
.mouseout(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(0 0)"}, 
     {duration:100}) 
    });

默認情況下，它會使用liniar動畫，但你可以設置不同的easing，如果你想要的東西不同。

來源

2010-09-11 15:27:36 Parrots

我不能使用動畫，我認爲，因爲背景圖像是從視頻5幀。 :( – ipalaus 2010-09-11 16:08:37

jQuery懸停，改變各種背景與無限循環，直到鼠標不在

回答

相關問題