獲取元素ID爲動畫jQuery

我有一個精靈圖像比mouseenter/mouseleave發生在其上，背景位置changes.This工作到目前爲止，雖然有可能是一個更有效的方式來做到這一點。然而，我有幾個圖像需要做到這一點，並試圖找到一種方法，將圖像的id提供給jQuery而不是重複的代碼。
的HTML：獲取元素ID爲動畫jQuery

<div class='featSmallBox' id='featSmallImg2'> 
</div>

圖像源是利用CSS佈置。
這是我迄今爲止的jQuery。

$("#featSmallImg2").mouseenter(function(){ 
        $(this).animate({ 
        backgroundPositionX:"100%" 
        }); 
        }); 

$("#featSmallImg2").mouseleave(function(){ 
        $(this).animate({ 
        backgroundPositionX:"0%" 
        }); 
        });

理想情況下，我需要在什麼被動態的的mouseEntered id來養活，但一切我試過似乎並沒有工作。
道歉，如果這幾乎沒有意義。我是jQuery和這個網站的新手。

來源

2013-10-17 Shamrockonov

我認爲你的代碼有一個錯字！不是嗎？ 'mouseenter（）'和'mouseleave（）'沒有關閉:)是你的實際代碼嗎？ –

@DhavalMarthak他的代碼是正確的。這兩個事件分別在第4行和第8行關閉！ – Flux

@DhavalMarthak你是對的！只是忘了把它們放在這裏出於某種原因 – Shamrockonov

如果jQuery代碼對於包含精靈的所有div都是相同的，請嘗試將jQuery中的$("#featSmallImg2")更改爲$(".featSmallBox")。這樣，所有與.featSmallBox類別的div都將具有此功能。

來源

2013-10-17 09:07:48 Flux

這個解決方案馬上工作！然而，稍後我會在圖片上滑動文字（每個圖片的文字也不同），當我這樣做時，它會滑動所有圖片的文字，而不僅僅是徘徊的文字。我應該把這個真的.. – Shamrockonov

@Shamrockonov我會建議，然後你標記我的答案是正確的（通過點擊答案左邊的空白勾）來關閉這個問題，然後發佈一個新的問題，詳細說明你想要的滑動文本起作用，因爲如果您開始編輯當前問題（並且所有答案將變得無關緊要），它會變得有點麻煩。如果您希望在此之前進一步討論此問題，或者不發佈新問題，您也可以向我發送一封郵件。 – Flux

請與event.target

$("body").mouseenter(function(event) { 
    console.log("mouseentered id: " + event.target.id); 
});

來源

2013-10-17 09:08:30

$("div[id^='featSmallImg']").mouseenter(function(){ 
        $(this).animate({ 
        backgroundPositionX:"100%" 
        }); 
        }); 

$("div[id^='featSmallImg']").mouseleave(function(){ 
        $(this).animate({ 
        backgroundPositionX:"0%" 
        }); 
        });

試試這個代碼。事件將被稱爲所有div的編號以'featSmallImg'開頭

來源

2013-10-17 09:36:04

只有在動畫之後的背景位置對所有分區應該相同時纔有效。 –

獲取元素ID爲動畫jQuery

回答

相關問題