jquery - 当悬停在 Jquery 中时，多个图像元素全部消失。

Question

我在仅对页面上具有相同 ID 的一个元素应用淡入淡出时遇到问题。

首先，我将图像淡入淡出至 60%，然后在悬停时，我希望它仅为图像的 100%。这部分有效，但它将效果应用于页面上的每个元素。

// Fading images
$(document).ready(function(){

$('.mainArticle img').fadeTo('slow', 0.6);

$('.mainArticle img, .articleContainer').hover(function(){

    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 1.0);
},function(){
    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 0.6); 
}); 
});

我也知道如果 CSS 可以做到这一点，但要尽可能兼容。

希望大家帮忙

干杯，

汤姆

Answer 1

您正在再次find()相同的元素。 $(this) 是悬停元素，因此您可以将其用于悬停处理程序:

$('.mainArticle img, .articleContainer').hover(function(){
  $(this).stop(true,true).fadeTo("slow", 1.0);
},function(){
  $(this).stop(true,true).fadeTo("slow", 0.6); 
});

但是，我想我明白你想要做什么，并且根据你的 HTML(如果你可以发布你的 HTML 会容易得多)，你可能想将其更改为如下所示:

$(function(){
  $('.mainArticle img').fadeTo('slow', 0.6);

  $('.articleContainer').hover(function(){
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 1.0);
  },function(){
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 0.6); 
  });
});

<小时/>

只有一张图像要淡出:jsFiddle

多个图像要淡入淡出:jsFiddle