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')代替.fadeTo('slow',1) - 或者您可以使用更简洁（更清晰）fadeTo()（docs）。（注意，与其他动画功能相比，fadeTo的参数顺序不同 - 持续时间先到，然后是你想要淡入的值。）

当然，您也可以使用animate()代替您的其他不透明度动画 - 尽管使用animate()显然没有任何问题 - 两者是等效的。（当然，如果你想同时操作多个css属性，你需要se $(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); }); }); });。）

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

.each()

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

另请注意：在上面的示例中，我已经包含了您在原始示例中使用的$(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技术）：

each()

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

修改

OP指出，将鼠标悬停在标题上（位于图像顶部）会导致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); }); });。代码会改变如下：

{{1}}

here is a new version of the 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');
        });
    });
});

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

3 个答案: