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

Question

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

3

我正在使用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错误，但我无法在这里执行该操作（因为我在照片下面）。

谢谢！

- klavina

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

1

同位素很酷。http://isotope.metafizzy.co/ - mVChr

3个回答

0

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

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

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

- user170386

我需要动画变得这么慢（慢= 600毫秒），所以将其更改为更快的值是没有帮助的。我尝试过了，但问题仍然存在-即使我已经移动到另一个图层，动画仍然在之前的图层上发生。我相信我需要改变代码的方式，以便在我离开元素时停止执行动画，但不幸的是我没有这样做的知识。 - klavina

如果你想在鼠标离开元素时尝试停止动画，请参见我的答案编辑。 - user170386

0

尝试使用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');
        });
    });
});

- Jesse E. Stark

hover()з»‘е®љдє†mouseenterе’Њmouseleave(еЏ‚и§Ѓж–‡жЎЈ)гЂ‚з›ґжЋҐз»‘е®љиї™дє›дє‹д»¶дёЌеє”иЇҐжњ‰д»»дЅ•еЅ±е“ЌгЂ‚ - Lee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lee · Accepted Answer

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

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

为了解决这个问题，你可以使用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);
    });
});

这里是 jsFiddle 的新版本

。