jquery淡入淡出优先级
Posted
技术标签:
【中文标题】jquery淡入淡出优先级【英文标题】：jquery fade in fade out priority 【发布时间】：2012-01-24 16:11:30 【问题描述】：我最近发布了关于悬停的悬停效果。
现在可以正常工作了，但我想知道是否有办法确定效果的优先级。例如，如果用户快速经历一系列图像翻转，则动画需要一段时间才能赶上。我不介意动画继续播放，但我希望当前悬停的项目立即淡入淡出。
这是我目前的代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
bodybackground:gray;
divposition:relative;
.box
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
.boxover
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
</style>
<script type="text/javascript">
$(function()
$('.box').hover(over, out);
);
function over(event)
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(400);
$(over_id).css("display","normal");
function out(event)
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(400);
</script>
</head>
<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" /><div id="box_over_3" class="boxover">rob</div></a>
</body>
</html>
我可以做些什么来使悬停的 div 优先于其他 div 吗？所以我不必等到动画完成。
干杯
罗伯
【问题讨论】：
【参考方案1】：您可以在 jQuery 中使用 stop 函数来使其更好。它将停止正在进行的动画。
function over(event)
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).stop(true, true).fadeIn(400);
$(over_id).css("display","normal");
function out(event)
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).stop(true, true).fadeOut(400);
【讨论】：
完善我的朋友 :) 正是我想要的 :)【参考方案2】：如果用户将鼠标悬停在图像上达到设置的阈值时间量（不是每次悬停），我只会触发动画（特别是如果它们很长）。
请参阅有关实施controlled hover 的相关帖子。
【讨论】：
啊，好的，我将如何在 jquery 中做到这一点？ @RobertShillito - 见上面的链接。本质上使用超时和 jQuery 数据属性来跟踪点击。还建议了替代解决方案。【参考方案3】：与@SliverNinja 链接的内容相关，专门针对您的场景：
function over(event)
var $this = $(this);
$this.data('hoverTimer', setTimeout(function()
timer = null;
var over_id = '#box_over_' + $this.attr('id').replace('over_', '');
$(over_id).fadeIn(400);
$(over_id).css("display", "normal");
, 200));
function out(event)
var timer = $(this).data('hoverTimer');
if (timer !== null)
clearTimeout(timer);
var over_id = '#box_over_' + $(this).attr('id').replace('over_', '');
$(over_id).fadeOut(400);
这是小提琴：http://jsfiddle.net/9RR93/
【讨论】：
以上是关于jquery淡入淡出优先级的主要内容，如果未能解决你的问题，请参考以下文章
在多个列表项上使用淡入淡出 jQuery 淡入淡出效果更改图像源