使用 jQuery 将 div 变灰

Question

我正在尝试使用此代码：

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

要淡出一堆名为

MySelectorDiv

的 div，唯一的问题是，它只会淡出第一个，而不是全部。这是为什么？

我还想在

div

事件上取消淡入淡出

rollover

，所以基本上所有的 div 都会变灰，除了活动的 div 被翻滚。

希望你能理解。

Answer 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，然后在它们上附加一个悬停事件 - 当鼠标进入该区域时运行第一个函数，当鼠标离开该区域时运行第二个函数。

Answer 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之间快速移动鼠标，它们之后都会不断淡入和淡出，因为已经堆积了一长串动画效果。为了防止这种情况，请在悬停内的每个

.stop()

之前添加

fadeTo()

：

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

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