jQuery:fade-in/out+；为元素设置动画

我正在使用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');
               })
            });
        });

您可以在上看到完整的代码（我也在使用页面上的jQuery砌体插件）

我对JS/jQuery相当陌生，上面的代码不太好用，除非我慢慢地将鼠标移到.image元素上。当我在元素上移动得更快时，即使我已经移动到另一个元素上，图像上的标题也会显示出来。我怎样才能去掉它？也就是说，只有当我仍在该特定元素上悬停时，标题才会淡入

示例站点上的第一幅图像的标题为“z-index:100；”，因此我可以获得完全不透明的文本覆盖。理想情况下，我会为所有标题设置“z-index:100；”，但这会使悬停的效果更加糟糕

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

---

谢谢大家!

不确定“慢”参数在动画功能中的含义。尝试将其调整为“快”，甚至以毫秒为单位提供一个数值，看看这是否有帮助

要在鼠标离开某个元素时停止该元素上的动画，请执行以下操作：

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

尝试使用mouseenter（）和mouseleave（）代替hover（）

---

问题的核心原因是，除了

$（this）.stop（）

（您已经有了）之外，还需要调用

.sibbins（）.stop（）

修复后，您将看到一个新问题，您的标题最初工作正常，但在反复鼠标移动后，仅部分开始淡入（最终，它们将完全消失，直到您重新加载页面）。这是由于

.fadeIn（）

与

组合时的工作方式。fadeOut（）

--

fadeIn（）

并不总是淡入到

不透明度：1

--相反，它淡入到以前调用

fadeOut（）

时应用的任何不透明度

要解决这个问题，您可以使用

动画（{opacity:1}，'slow'）

而不是

fadeIn（'slow'）

——或者您可以使用更简洁（更清晰）的

.fadeTo（'slow'，1）

（）。（注意，与其他动画功能相比，fadeTo上的参数顺序不同-持续时间先出现，然后是要淡入的值）

当然，您也可以使用

fadeTo（）

来代替其他不透明度动画——尽管如您所示，使用

animate（）

肯定没有什么错——两者是等效的。（当然，如果要同时操作多个css属性，则需要使用se

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

$(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);
    });
});

您可以在JSFIDLE上看到以下代码：
（注意：该示例取决于上面原始帖子附带的托管资源，因此如果这些资源被移动或变得不可用，它将无法工作）

---

另请注意：在上面的示例中，我已经包括了

.each（）

的使用，正如您在原始示例中所做的那样，但我想指出，这确实不是必需的

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

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

each（）

的代码）

---

编辑

OP指出，将鼠标悬停在标题（位于图像顶部）上会触发

mouseleave

处理程序，从而执行展开操作。所需的行为是使标题不触发卷展栏

出现此问题的原因是，标题“阴影”了图像，并且将

悬停（）

应用于图像。当鼠标在标题上滚动时，它不再在图像上（它在标题上），因此浏览器会在图像上触发鼠标删除。同样的情况也会引发其他各种微妙的问题——特别是当你添加更复杂的内容时

为了解决这个问题，我建议您只需将

hover（）

应用到上一级（保存图像和标题的容器），而不是直接应用到图像。在本例中，容器是

$（'.entry'）

。代码将更改如下：

$(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);
        });
    });
});

$(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);
    });
});

---

+1用于使用砌体-我刚找到它，想不出更酷的东西：-D至于你使用它，它看起来很棒。很抱歉，我无法帮助您解决您的问题：-（同位素更酷。我需要动画速度这么慢（慢=600ms），因此将其更改为更快的值不会有任何帮助。我确实尝试过，但问题仍然存在-动画一直发生在上一层，即使我移动到了另一层。我相信我需要更改代码，使其在我离开元素时停止执行动画，但不幸的是，我不知道若要在鼠标离开某个元素时尝试停止该元素上的动画，请参见“编辑到我的答案”。

hover（）

binds

mouseenter

和

mouseleave

（）。直接绑定这些事件应该不会有任何区别。感谢您的介绍和解释！在Safari/Chrome/Firefox中工作得非常好。不幸的是，在IE中工作得不太好--当我将鼠标移到该区域上时，图像会淡入不透明度：1&标题文本消失。发生这种情况是因为您的

hover（）

handler位于图像上，而不是标题上，因此当您滚动标题时，IE会将其处理为“离开”图像。如果您为标题提供多个定位相关css属性中的任何一个，其他浏览器也会这样做。可能会出现其他微妙的问题