1

私は多くのホバリング可能なdivを含むプロジェクトに取り組んでいます。私はこれを行うアニメーションを書きました：

マウスオーバーすると画像がフェードアウトし、コールバックとして情報を含むdivがフェードインします。次にマウスアウトすると情報divがフェードアウトし、コールバックとして画像がフェードインします。私はhoverIntentプラグインを使用しています。

私の問題は、divを十分に長くとどまると、すべてが正常に機能することです。ただし、300ミリ秒と言ったままにすると、アニメーションは停止しますが、情報divを示すコールバックが呼び出され、マウス出力イベントは無視されます。その結果、情報divが永続的に保持されます...

これが私のコードです：

 var infoPaneSettings = {
    sensitivity: 3,
    interval: 200,
    timeout: 500,
    over: showPane,
    out: hidePane

    }   

function showPane() {
    var entry = $(this);
    $('.featured_img', entry).fadeTo(1000, 0, 
        function(){
        $('.infoPane', entry).fadeTo(200, 1);
        });


}

function hidePane() {
    var entry = $(this);
    $('.infoPane', entry).fadeTo(300, 0, 
        function(){
        $('.featured_img', entry).fadeTo(200, 1);
        });
}

$('.entry').each(function(){
    $(this).hoverIntent(infoPaneSettings);
});

あなたが私を助けてくれることを願っています！

4

1 に答える 1

4

新しいアニメーションを開始する前に、要素でhttp://api.jquery.com/stop/を使用してください。コールバックの実行を防ぎます。

于 2011-09-16T09:24:20.023 に答える