1 
$('.rollover').mouseover(function(e){

        e.stopPropagation();

        thisName = $(this).attr('title');

        $('li#'+thisName).show(50, 'swing');

    });


    $('.rollover').mouseout(function(e){

        e.stopPropagation();                    

        thisName = $(this).attr('title');

        $('li#'+thisName).hide(50, 'swing');

    });

'rollover'クラスの画像が4つあるので、各画像の上にマウスを置くと、画像のタイトルとIDを共有するリストアイテムが表示され、マウスを離すとリストアイテムが非表示になります。

私の問題は、画像が非常に接近していることです。マウスの出入りが速すぎると、リスト項目が点滅しているように見えます。次のマウスオーバーアニメーションが始まる前にマウスアウトアニメーションが完了しなければならないように、またその逆もできるようにしたいと思います。

どうすればいいですか？

JS FIDDLE @ http://jsfiddle.net/callumander/XhpuT/

4

2 に答える 2

1

ユーザーが新しいコンテンツを表示する前にすべてのアニメーションを完成させて処理を遅くするのではなく、Hover Intent プラグインのようなものを使用して「偶発的な」マウスオーバーを防止してみませんか?

于 2011-06-01T10:06:30.120 に答える
0

.queue（未テスト）を使用してみてください：

$('.rollover').mouseover(function(e){
    e.stopPropagation();
    thisName = $(this).attr('title');

    // start the showing once any currently running
    // animations are done
    $('li#'+thisName).queue(function() {
        $(this).show(50, 'swing');
        $(this).dequeue();
    });
}).mouseout(function(e){
    e.stopPropagation();                    
    thisName = $(this).attr('title');

    // start the hiding once any currently running
    // animations are done 
    $('li#'+thisName).queue(function() {
        $(this).hide(50, 'swing');
        $(this).dequeue();
    });
});
于 2011-06-01T09:47:23.950 に答える