0

ユーザーが機能の上に浮かび、小さなボックス（div）がスライドして詳細を示す比較チャートを作成しています（「somethingBox1」など）

私はこれを完全に機能させていますが、マウスが1つのアクティブ領域(id = "something1"の画像)を離れてスライドアニメーションの終わり(image id = "something2"と言います)に移動すると、問題が発生します。

ブラウザは次のイベントを実行する前に前の行/アニメーションが完了するのを待っていないようで、ボックスが表示されているかどうかについて混乱するなどの問題が発生しています。

各要素に対して次のコードを実行しています。

$('#something1').mouseleave(function() {$("#somethingBox1").animate({width:'toggle'},0);});
$('#something1').mouseover(function(){timeout = window.setTimeout(function() {$("#somethingBox1").animate({width:'toggle'},0);}, 350);});
4

2 に答える 2

0

主題についてもっと読んだ後、私は完了時に呼び出し関数に出くわしました、

各.animate関数の最後にfunction（）{}を追加しましたが、ブラウザが待機するようです（つまり、chrome、safari、opera、firefoxでテスト済み）

$('#infolink6').mouseleave(function() {$("#infoBox6").animate({width:'toggle'},350, function(){});});
$('#infolink6').mouseover(function(){timeout = window.setTimeout(function() {$("#infoBox6").animate({width:'toggle'},350, function(){});}, 0);});
于 2012-12-31T15:00:32.727 に答える
0

stop現在のアニメーションを停止するを使用してみてください。新しいアニメーションが期待どおりに動作することを確認するために、アニメーションのアニメーションを (瞬時に) 終了させたいと考えています。

このようなもの：

$('#something1').hover(
    function() {
        $(this).stop(true, true).wait(350).animate({width:'toggle'}, 0);
    },            
    function() {
        $(this).stop(true, true).animate({width:'toggle'},0);
    }
);

(私はこのコードをテストしていません。)

于 2012-12-31T14:57:01.717 に答える