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

Question

我正在使用 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/stackoverflow/01/ 看到完整的代码（我也在使用页面上的 jQuery Masonry 插件）。

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

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

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

谢谢！

Answer 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