jQuery-多个类动作 [英] jquery - Multiple class actions
问题描述
我有一个简单的滑动框,当您将鼠标悬停在图像上方时,它会在图像上方滑动以显示一些信息.效果很好,但我在同一页面上有多张图像,因此当您将鼠标悬停在任何图像上时,所有框都向上滑动.
I've a simple sliding box slide up over an image to display some info when you hover over the image. This works fine but i have multiple images on the same page so when you hover over any of the images all of the boxes slide up.
是否有一种简单的方法可以对这种图像进行排序,以便仅将您悬停的图像向上滑动?还是基本上是创建相同的代码来为每个图像缩略图指定不同的ID?
Is there a simple way to sort this so only the image you hover over slides up? Or is it basically creating the same code stating different ID's for each image thumbnail?
在这里使用jquery-可以更正此代码段中的所有错误,因为我对此很陌生
Heres the jquery - feel free to correct any errors in this snippet as i'm very new to it
$('#gallery-inner .thumb .gallery-inner-thumb').hide();
$("#gallery-inner .thumb").hover(function () {
$("#gallery-inner .thumb .gallery-inner-thumb").show().animate({margin:'-36px 0 0'},'fast');
}, function () {
$("#gallery-inner .thumb .gallery-inner-thumb").animate({margin:'1px 0 0'},'fast');
});
和html块.
<div class="thumb clearfix">
<div class="image">
<a href="#" title="#"><img src="images/simg/pimg.jpg" alt="#"></a>
<div class="gallery-inner-thumb clearfix">
<div class="name"><a href="#">Image Name</a></div>
<div class="comments"><a href="#">0</a></div>
</div>
</div>
</div>
谢谢
推荐答案
jQuery将目标元素作为this
传递给事件处理程序.因此,您可以执行以下操作:
jQuery passes the target element to event handlers as this
. Therefore, you can do something like:
$("#gallery-inner .thumb").hover(function() // mouse over target
{
// select child of target .thumb with class .gallery-inner-thumb
$(".gallery-inner-thumb", this)
.show().animate({margin:'-36px 0 0'},'fast');
},
function() // mouse off of target
{
// select child of target .thumb with class .gallery-inner-thumb
$(".gallery-inner-thumb", this)
.animate({margin:'1px 0 0'},'fast');
});
...,它将分别适用于每个缩略图.此处的关键是在选择要显示/设置动画的子级时为jQuery函数指定上下文(this
-事件目标).
...and it'll work for each thumbnail individually. Key here is specifying a context (this
- the event target) to the jQuery function when selecting children to show / animate.
这篇关于jQuery-多个类动作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!