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

ああ、[OK]を、どのように私はjQueryのではということだろうか？ –

@RobertShillito - 上記リンクを参照してください。基本的にクリックを追跡するためにタイムアウトとjQueryのデータ属性を使用して。代わりの解決策も提案されている。 – SliverNinja

あなたはそれを改善するためにjQueryのに停止機能を使用することができます。進行中のアニメーションを停止します。

、具体的シナリオのためにリンク@SliverNinjaものに関連

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

私の友人を完璧:)私が望んでいたまさに:) –

は：

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フェードインでフェードアウト優先

答えて

関連する問題