如何拥有jQuery效果的多个实例

Question

首先，免责声明--我只是从jQuery开始。我为我的无能道歉。:)

我的问题是，我试图在页面上的一堆单独的元素上使用jQuery翻转效果。现在，当我将鼠标移到它们上面时，它们都会立即生效，因为它们具有相同的类名，而jQuery正在选择所有它们。我知道我可以为每个类使用不同的名称，并为每个类编写单独的jQuery，但是有没有更好的方法呢？我计划拥有许多这样的元素。

无论如何，一张图片胜过千言万语。在这里查看我的测试页面的源代码:在“测试”图像上使用Click Here鼠标。我希望这个效果只适用于你用鼠标滑过的那个。

这是我的新手jQuery：

    $(document).ready(function(){

$('.box').hover(function() {
 $('.rollover').fadeIn('slow');
 $('.description').fadeIn('fast');
});

$('.box').mouseleave(function() {
 $('.rollover').fadeOut('slow');
 $('.description').fadeOut('fast');
});


});

Answer 1

$('.box').hover(function() {
   $(this).next('.rollover').fadeIn('slow');
   $(this).find('.description').fadeIn('fast');
}, function() {
   $(this).next('.rollover').fadeOut('slow');
   $(this).find('.description').fadeOut('fast');
});

.hover()方法接受为mouseenter和mouseleave触发的两个函数。

在每个函数中，this关键字引用接收事件的.box元素。然后使用.find()获取嵌套的.description，使用.next()获取相邻的同级.rollover。

• http://api.jquery.com/hover/
• http://api.jquery.com/find/
• http://api.jquery.com/next/

在您的情况下，如果您愿意，可以使用.siblings('.rollover')而不是.next()。

• http://api.jquery.com/siblings/

Answer 2

如果我可以一次选择一个，我想我可以只对他们的孩子应用效果。我只希望你能告诉jquery只需选择鼠标所在的位置，而不需要声明ID或Class……