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

发布于 2024-12-04 11:44:30 字数 574 浏览 7 评论 0原文

我在仅对页面上具有相同 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 可以做到这一点，但要尽可能兼容。

希望你们能帮忙，

干杯，

汤姆

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-残月青衣踏尘吟 2024-12-11 11:44:30

您再次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

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

回复收藏 0 原文