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 元素上。当我更快地在元素上移动时，即使我已经移动到另一个元素上，图像上的标题也会显示。我怎样才能删除它？即，只有当我仍然悬停在该特定元素上时，标题才会淡入。

示例网站上的第一张图像具有“z-index: 100;”对于标题，这样我就可以获得完全不透明的文本叠加。理想情况下，我会有“z-index：100;”对于所有的标题，但这使得悬停工作变得更糟。

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

谢谢你！

Answer 1

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

解决这个问题后，您会看到一个新问题，您的字幕最初工作正常，但当反复将鼠标悬停在其上时，它们开始仅部分淡入（最终，它们会完全消失，直到您重新加载字幕）页）。这是由于 .fadeIn() 与 .fadeOut() 结合使用时的工作方式 - fadeIn() 并不总是淡出 -进入 opacity:1 ——相反，它淡入到之前调用 fadeOut() 时应用的任何不透明度。

要解决此问题，您可以使用 animate({opacity:1},'slow') 而不是 fadeIn('slow') ——或者您可以使用 more简洁（更清晰）.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() 应用于图像。当鼠标滑过标题时，它不再位于图像上（它位于标题上），因此浏览器会在图像上触发鼠标左键。同样的情况也可能引起各种其他微妙的问题——尤其是当您添加更复杂的内容时。

为了解决这个问题，我建议您简单地将 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);
    });
});

这是 jsFiddle 的新版本

Answer 2

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

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

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

Answer 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');
        });
    });
});