jquery淡入淡出优先级答案

【问题标题】：jquery fade in fade out priorityjquery淡入淡出优先级
【发布时间】：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>
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>

我可以做些什么来使悬停的 div 优先于其他 div 吗？所以我不必等到动画完成。

干杯

罗伯

【问题讨论】：

标签： jquery hover fadein fadeout

【解决方案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/

【讨论】：