同一個類的對象上的動畫，一次一個

即時通訊嘗試在頁面上的所有元素上運行動畫懸停效果。我的問題是，當我把它們放在其中任何一個上面時，它都會使它們動起來。同一個類的對象上的動畫，一次一個

$('div.anime').hover(function() { 
$('.box').animate({'do something cool'}); 
});

所有的箱子都有相同的類別anime。所以即時通訊只是想弄清楚如何只在你懸停一個時才動畫，而不給他們所有你認識的單獨的課程？

我知道這是一個簡單的問題，但我還在學習的jQuery的方式:)所以請與我

這裏熊的HTML：

<div class="anime"> 

<div class="box">Hey show me! Im cool!</div> 
</div>

來源

2011-03-25 Sin

你能證明包括至少一個'div.anime'和'.box'你的HTML的一部分？ – mVChr 2011-03-25 04:20:25

哈！我猜你的HTML設置正確。 – jondavidjohn 2011-03-25 04:31:13

一般來說他們的方式，你會做到這一點是使用了this關鍵字指定正在徘徊的項目，然後通過遍歷DOM樹選擇要在關係到動畫的this DOM元素。

例如

給出以下HTML

<div class="anime"> 

    <p>other stuff</p> 

    <div class="box"> 
     <p>content</p> 
    </div> 

</div>

這個JavaScript（使用jQuery）將選擇和動畫只能在徘徊在.anime遏制，因爲我使用的.find()功能遍歷的.box與$(this)（被徘徊的元素）相關的DOM。

$('div.anime').hover(function() { 
    $(this).find('.box').animate({'do something cool'}); 
});

你可以閱讀更多和發現更多的功能Traversing the DOM here.

來源

2011-03-25 04:26:57 jondavidjohn

真棒謝謝！ – Sin 2011-03-25 04:37:03

嘗試使用每個jQuery的

的功能

$("div.anime").each(function(){ 

$(this).hover(function() { 
    $(this).find('.box').animate({'do something cool'}); 
}); 

});

來源

2011-03-25 04:23:24

啊所以這是你所說的'.each'，我想我在看另一個jQuery ...每個錯誤都是錯誤的 – Sin 2011-03-25 04:39:33

在JavaScript中，您可以使用'this'來捕獲事件的目標。使用'this'會將動畫方法限制爲正在執行的對象。

$('div.anime').hover(function(e){ 
    $(this).animate({'do something cool'}); 

}, function(){ 
    // dont forget on mouseout 
    $(this).animate({'return to normal state'}); 

})

來源

2011-03-25 04:26:18

啊，有趣的是我忘了發佈那部分哈哈，謝謝！ – Sin 2011-03-25 04:37:31

$('div.anime .box').hover(function() { 
$(this).animate({'do something cool'}); 
});

來源

2011-03-25 04:35:18 mattsven

同一個類的對象上的動畫，一次一個

回答

相關問題