使用JQuery灰显div

我正在尝试使用以下代码：

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

jQuery（“#MySelectorDiv”）.fadeTo（500,0.2）；

要淡出一组名为MySelectorDiv的div，唯一的问题是，它只淡出第一个而不是所有的div。。。为什么呢

我还想在翻滚时取消对div的着色，因此基本上所有div都将灰显，除了正在翻滚的活动div

---

希望您能理解。

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

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

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

---

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

因为您使用的是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);

---

演示：

好的。。。。那么我问题的第二部分呢。。。在翻滚时，我想将其淡入何处？

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

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