jquery淡入淡出优先

我最近发布关于悬停效果的悬停效果。jquery淡入淡出优先

它现在工作正常，但我想知道是否有一种方法来优先考虑效果。例如，如果用户快速浏览一系列图像翻转，动画需要一段时间才能赶上。我不介意动画继续播放，但我希望当前正在播放的内容能够立即淡入淡出。

这是我的时刻代码：

<!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> 
body{background:gray;} 
div{position: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" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a> 
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a> 
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a> 


</body> 

</html>

有什么我可以做，以制作一部正在上空盘旋prioristise比其他的DIV？所以我不必等到动画完成。

干杯

罗布

来源

2011-12-20 Robert Shillito

我只会触发动画（特别是如果它们是长）如果用户将鼠标悬停的时间设定的阈值量的图像（不在每个翻转）。

请参阅相关文章controlled hover的实施。

来源

2011-12-20 18:02:40 SliverNinja

啊，好吧，我如何做，在jQuery的？ – 2011-12-20 18:04:55

@RobertShillito - 请参阅上面的链接。基本上使用超时和jQuery数据属性来跟踪点击次数。还建议替代解决方案。 – SliverNinja 2011-12-20 18:07:29

你可以使用stop函数在jQuery中使它更好。它将停止正在进行的动画。

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); 

}

来源

2011-12-20 18:05:32 Diode

http://api.jquery.com/stop/ – Diode 2011-12-20 18:06:09

完美我的朋友:)正是我想要的:) – 2011-12-20 18:10:28

相关到什么@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/

来源

2011-12-20 18:31:02

jquery淡入淡出优先

回答

相关问题