0

我在淡入/淡出某些元素时遇到问题。我需要有几个 div，淡入新背景，以及悬停时的文本。当我悬停在那个元素上时，我还需要让其他 div 淡出一些。

如果我将鼠标悬停在一个元素上，我可以淡出其他元素，但我无法弄清楚其余的问题。

我只希望那些特定的 div 受到影响，因为我在页面上有其他 div（id 和 classes）。

这是我的小提琴：http: //jsfiddle.net/deelite/SnvMr/2/

我的jQuery：

$('div').hover(function() {
  $('div').not($(this)).stop().fadeTo(500, 0.33);
  }, function() {
  $('div').stop().fadeTo(500, 1);
});

我不知道该怎么做。

4

2 回答 2

2

只需使用.not(this); .not($(this))是不正确的。您还有其他几个错误。您可以将另一个类（例如，.effect）添加到div要应用效果的 s 中。

HTML：

<div class="effect one"><p>me</p></div>
<div class="effect two"><p>have</p></div>
<div class="effect three"><p>fun</p></div>

jQuery：

$('.effect').hover(
    function() {
        $('.effect').not($(this)).stop().fadeTo(500, 0.33);
    }, function() {
        $('.effect').stop().fadeTo(500, 1);
    }
);

小提琴：http: //jsfiddle.net/SnvMr/5/

于 2013-05-14T22:11:38.230 回答
0

感谢 Mooseman 对代码的帮助，我更进一步，关于如何通过将 div（包含新背景）插入到包含第一个背景的 div 中来进行背景“更改”，并拥有新的div 淡入/淡出旧的。第二个 div 必须与原始 div 具有相同的“尺寸”，除非您要获得 bg 必须相互偏移的效果。

您可以在此处查看更新的代码：http: //jsfiddle.net/deelite/SnvMr/12/

JS代码：

$('.effect').hover(
function () {
    $('.effect').not(this).stop().fadeTo(500, 0.33);
    $(this).find('div').stop().fadeTo(500, 1);
}, function () {
    $('.effect').stop().fadeTo(500, 1);
    $('.effect div').stop().fadeTo(500, 0);
});

谢谢！

于 2013-05-17T22:55:05.380 回答