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，一个用于mouseenter，另一个用于mouseleave，正如您所看到的那样，它们相互之间的fadeTos相反。

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

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

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

Gray out divs使用JQuery

2 个答案: