jQuery:淡入/淡出动画元素

我正在使用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;”对于 Headers ,所以我可以完全不透明地获得文本叠加 . 理想情况下,我会有“z-index:100;”对于所有字幕,但这使得徘徊工作更加糟糕 .

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

谢谢!

回答(3)

2 years ago

您的问题的核心原因是除了 $(this).stop() (您已经拥有)之外,还需要调用 .siblings().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() 的代码) .


Edit

OP指出,将鼠标悬停在 Headers 上(位于图像顶部)会导致 mouseleave 处理程序触发,从而导致执行转出操作 . 所需的行为是让 Headers 不触发推出 .

出现此问题的原因是图像的 Headers "shadows"和 hover() 应用于图像 . 当鼠标滚过 Headers 时, Headers 上的 Headers 为's no longer on the image (it',因此浏览器会在图像上触发鼠标左键 . 同样的情况也会引发各种其他微妙的问题 - 特别是当你添加更复杂的内容时 .

要解决这个问题,我建议您只需将 hover() 向上一级(对于包含图像和 Headers 的容器),而不是直接将其应用于图像 . 在这种情况下,该容器是 $('.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

2 years ago

不确定“慢”参数在你的动画功能中有多长时间 . 尝试将其调整为“快速”或甚至提供数字值(以毫秒为单位),看看是否有帮助 .

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

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

2 years ago

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