Gray out divs使用JQuery

Question

我试图使用这段代码:

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

为了淡出一堆名为MySelectorDiv的div,唯一的一点是,它只会淡化第一个而不是全部...为什么会这样？

我也想在翻转时解除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，一个 formouseenter和一个 for mouseleave，正如您所看到的，它们彼此执行相反的淡入淡出。

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

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

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