同一个类的对象上的动画，一次一个

即时通讯尝试在页面上的所有元素上运行动画悬停效果。我的问题是，当我把它们放在其中任何一个上面时，它都会使它们动起来。同一个类的对象上的动画，一次一个

$('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

同一个类的对象上的动画，一次一个

回答

相关问题