jQuery：淡入/淡出+动画元素

Posted 2023-05-08

【中文标题】jQuery：淡入/淡出+动画元素

【英文标题】：jQuery: fade in/out + animate elements

【发布时间】：2011-07-14 13:14:53

【问题描述】：

我正在使用 jQuery 淡入/淡出某些元素并更改其他元素的不透明度。

  $(function()

        $('.image').each(function() 
            $(this).hover(
                function() 
                    $(this).stop().animate( opacity: 0.3 , 'slow');
                    $(this).siblings().fadeIn('slow');
                ,

               function() 
                   $(this).stop().animate( opacity: 1 , 'slow');
                   $(this).siblings().fadeOut('slow');
               )
            );
        );

您可以在http://projects.klavina.com/***/01/ 看到完整的代码（我也在使用页面上的 jQuery Masonry 插件）。

我对 JS/jQuery 还很陌生，上面的代码不能很好地工作，除非我非常缓慢地将 .image 元素悬停。当我更快地移动元素时，即使我已经移动了另一个元素，图像上的标题也会显示出来。我怎样才能删除它？ IE。仅当我仍在悬停该特定元素时，字幕才应淡入。

示例网站上的第一张图片具有“z-index: 100;”为标题，所以我可以得到完全不透明的文本覆盖。理想情况下，我会有“z-index: 100;”对于所有字幕，但这会使悬停工作变得更糟。

另外，IE 中的淡入/淡出看起来有些失真。我该如何解决？我确实在另一个页面上使用了不透明度更改，并通过向元素添加白色背景来修复 IE 错误，但我不能在这里这样做（因为我在下面有一张照片）。

谢谢！

【问题讨论】：

+1 用于使用 Masonry - 我刚刚找到它，想不出更酷的东西 :-D 至于你对它的使用，它看起来很棒。抱歉，我无法帮助您解决问题 :-(

同位素比较冷。 isotope.metafizzy.co

【参考方案1】：

您的问题的核心原因是您需要调用.siblings().stop()，另外到$(this).stop()（您已经拥有）。

修复该问题后，您会看到一个新问题，您的字幕最初可以正常工作，但一旦被反复鼠标悬停，它们只会部分淡入（最终，它们会完全消失，直到您重新加载页面）。这是由于.fadeIn() 与.fadeOut() 结合时的工作方式——fadeIn() 并不总是淡入opacity:1——相反，它淡入到当时应用的任何不透明度@987654332 @ 之前被调用过。

要解决这个问题，您可以使用animate(opacity:1,'slow') 而不是fadeIn('slow') -- 或者您可以使用更简洁（更清晰）的.fadeTo('slow',1) (docs)。 （请注意，fadeTo 上的参数顺序与其他动画函数相比有所不同 - 首先是持续时间，然后是您要淡入的值）。

当然，您也可以使用fadeTo() 代替您的其他不透明动画——尽管使用animate() 肯定没有错，正如您所展示的那样——两者是等价的。 （当然，如果您想同时操作多个 css 属性，则需要选择 animate()。）

当这一切结合在一起时，它可能看起来像这样：

$(function() 
    $('.image').each(function() 
        $(this).hover( function() 
            $(this).stop().fadeTo('slow',0.3)
                .siblings().stop().fadeTo('slow',1);
        , function() 
            $(this).stop().fadeTo('slow',1)
                .siblings().stop().fadeTo('slow',0);
        );
    );
);

你可以在 jsFiddle 看到这段代码的运行：http://jsfiddle.net/coltrane/XstpE/ （注意：该示例取决于上面原始帖子附带的托管资源，因此如果这些资源被移动或变得不可用，它将不起作用）。

---

另请注意：在上面的示例中，我已经包含了 .each() 的使用，就像您在原始示例中所做的那样，但我想指出它确实没有必要。

以下是等效的（通常被认为是“更好”的 jQuery 技术）：

$(function() 
    $('.image').hover(function() 
        $(this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    , function() 
        $(this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    );
);

当您将事件处理程序应用于多元素集合时，jQuery 会自动将相同的处理程序绑定到集合中的每个元素上。 （我在 jsFiddle（上面链接）上更新了我的示例，以显示代码 没有 each()）。

---

编辑

OP 指出，将鼠标悬停在标题（位于图像顶部）上会导致触发 mouseleave 处理程序，从而导致执行转出操作。期望的行为是让标题不触发推出。

出现此问题是因为标题“遮蔽”了图像，并且hover() 应用于图像。当鼠标滑过标题时，它不再在图像上（它在标题上），因此浏览器会在图像上触发 mouseleave。同样的情况也会引发各种其他微妙的问题——尤其是当您添加更复杂的内容时。

为了解决这个问题，我建议您简单地将hover() 应用到上一层（应用到包含图像和标题的容器），而不是直接应用到图像。在这种情况下，该容器是$('.entry')。代码会变成这样：

$(function() 
    $('.entry').hover(function() 
        $('.image',this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    , function() 
        $('.image',this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    );
);

here is a new version of the jsFiddle

【讨论】：

谢谢你的解释和解释！在 Safari/Chrome/Firefox 中完美运行。不幸的是，在 IE 中效果不佳 - projects.klavina.com/***/01/index-02.html - 当我将鼠标悬停在 区域时；图像淡入 opacity:1 并且标题文本消失。

发生这种情况是因为您的hover() 处理程序在图像上——而不是在标题上——所以当你翻转标题时，IE 将其处理为“离开”图像。如果您为标题提供几个与定位相关的 css 属性中的任何一个，其他浏览器也会这样做。由于这个原因，还会出现其他一些微妙的问题——甚至是 Webkit 和 FF。最好的解决方案（在我看来）是将您的hover() 处理程序放在$('.entry') 而不是$('.image')。 see updated jsFiddle here.

【参考方案2】：

不确定“慢”参数在您的动画函数中意味着多长时间。尝试将其调整为“快速”，甚至提供以毫秒为单位的数值，看看是否有帮助。

在鼠标离开元素时停止动画：

$('.image').mouseleave(function() 
    $(this).stop();
);

【讨论】：

我需要动画那么慢（慢 = 600 毫秒），因此将其更改为更快的值无济于事。无论如何我确实尝试过，但问题仍然存在 - 动画继续在前一层上发生，即使我已经移动到另一个层。我相信我需要更改代码，使其在我离开元素时停止执行动画，但不幸的是我没有这样做的知识。

如果您想在鼠标离开时尝试停止元素上的动画，请参阅我的回答编辑。

【参考方案3】：

尝试使用 mouseenter() 和 mouseleave() 而不是 hover()。

$(function()
    $('.image').each(function() 
        $(this).mouseenter( function() 
            $(this).stop().animate( opacity: 0.3 , 'slow');
            $(this).siblings().fadeIn('slow');
        )
        .mouseleave( function() 
            $(this).stop().animate( opacity: 1 , 'slow');
            $(this).siblings().fadeOut('slow');
        );
    );
);

【讨论】：

hover() 绑定 mouseenter 和 mouseleave (see docs)。直接绑定这些事件应该没有任何区别。