使用 JQuery 使 div 变灰答案

【问题标题】：Gray out divs Using JQuery使用 JQuery 使 div 变灰
【发布时间】：2011-01-21 11:13:39
【问题描述】：

我正在尝试使用此代码：

<script>
jQuery('#MySelectorDiv').fadeTo(500,0.2);
</script>

要淡出一堆名为 MySelectorDiv 的 div，唯一的问题是，它只会淡出第一个而不是全部...这是为什么呢？

我还想在翻转时取消淡化 div，所以基本上所有 div 都会变灰，除了正在翻转的活动 div。

希望你能理解。

【问题讨论】：

标签： jquery fadeout

【解决方案1】：

只有第一个正在褪色，因为您使用的是 ID 而不是类。

如果您希望所有 div 都淡出，那么不要这样做：

<div id="MySelectorDiv">...</div>

这样做：

<div class="MySelectorDiv">...</div>

并将您的 jquery 选择器字符串更改为 '.MySelectorDiv'

它目前不起作用的原因是因为 ID 在页面上应该是唯一的，因此 jQuery 不会费心查找所有元素，只需找到与该 ID 匹配的第一个元素。

至于在悬停时淡出：

$(".MySelectorDiv")
    .fadeTo(500, 0.2)
    .hover(function () {
        $(this).fadeTo(500, 1);
    }, function () {
        $(this).fadeTo(500, 0.2);
    });

这首先淡化你的 div，然后在它们上附加一个悬停事件 - 第一个函数在鼠标进入该区域时运行，第二个函数在鼠标离开该区域时运行。

【讨论】：

好的......现在我的问题的第二部分呢......我想在翻转时将其淡入淡出？

【解决方案2】：

因为您使用的是 ID，而不是课程。 ID 在页面上必须是唯一的，而类可以重复。只需将所有 div 更改为使用 class="myselectordiv" 而不是 id。然后，您的 jQuery 选择器将更改为：

jQuery('.myselectordiv')...

要获得翻转效果：

// Fade everything out first
jQuery('.myselectordiv').fadeTo(500, 0.2);
jQuery('.myselectordiv').hover(function () {
    // Mouse enter, fade in
    jQuery(this).fadeTo(500, 1);
}, function () {
    // Mouse leave, fade out
    jQuery(this).fadeTo(500, 0.2);
});

这会将两个函数绑定到您的 div，一个用于mouseenter，一个用于mouseleave，正如您所看到的，它们彼此执行相反的fadeTos。

注意：但是，这有一个微妙的问题，如果您将鼠标快速移动到 div 上，您会注意到这一点。即使在将鼠标移离 div 之后，如果它仍在淡入淡出，它将继续完成动画，然后再次淡出。这可能是你想要的，但如果你在两个 div 之间快速移动鼠标，它们之后都会不断地淡入淡出，因为一长串的动画效果已经堆积如山。为防止这种情况，请在悬停内的每个 fadeTo() 之前添加一个 .stop()：

jQuery(this).stop().fadeTo(500, 1);

演示：http://jsfiddle.net/mm8Fv/

【讨论】：