我正在使用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错误,但我不能在这里做到(因为我在下面有一张照片)。
谢谢!
答案 0 :(得分:4)
您的问题的核心原因是您需要.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}}
答案 1 :(得分:0)
不确定“慢”参数在你的动画功能中有多长时间。尝试将其调整为“快速”或甚至提供数字值(以毫秒为单位),看看是否有帮助。
当鼠标离开时停止元素上的动画:
$('.image').mouseleave(function() {
$(this).stop();
});
答案 2 :(得分: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');
});
});
});