当在Jquery中徘徊时，多个图像元素全部消失。 [英] Multiple image elements all fading when hovered in Jquery.

问题描述

我在使用相同ID的页面上将淡入淡出应用于一个元素时遇到了问题。首先，我将图像淡化为60％，然后然后悬停，我希望它只是100％的图像。

  //淡入淡出的图像
 $（document ）.ready（function（）{
 
 $（'。mainArticle img'）。fadeTo（'slow'，0.6）; 
 
 $（'。mainArticle img，。 （'true'）.fadeTo（slow，1.0） ; 
}，function（）{
 $（this）.find（'.Article img，.articleContainer'）。stop（true，true）.fadeTo（slow，0.6）; 
}）; 
}）; 
  

另外我知道如果CSS尽量兼容，可以这样做。

希望你们能帮忙，

干杯，

Tom

解决方案

您再次找到 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 ）.faind（slow，0.6）; 
}）; 
}）; 
  

---

只有一个图像可以淡入： jsFiddle

使多张图片渐变：

I'm having an issue with applying a fade to just one element on the page with the same ID.

Firstly I fade the image down to 60% and then on hover I would like it to just 100% the image. This part works but it applies the effect to every element on the page.

// 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); 
}); 
});

Also I know this can be done if CSS but trying to be as compatible as possible.

Hope you guys can help,

Cheers,

Tom

解决方案

You are find()ing the same elements again. $(this) is the hovered element, so you can just use this for your hover handler:

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

However, I think I understand what you are trying to do, and depending on your HTML (if you could post your HTML it would be a lot easier), you'll probably want to change it to something like this:

$(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); 
  });
});

---

With only one image to fade: jsFiddle

With multiple images to fade: jsFiddle

这篇关于当在Jquery中徘徊时，多个图像元素全部消失。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！