0

私のウェブサイトに小さな jquery スライド div を作成しました。タブにカーソルを合わせると、div が右からスライドインし、マウスを離すイベントで div がスライドして表示されなくなります。ただし、私が抱えている問題は、マウスをタブの上にすばやく移動してからオフにし、これを繰り返し続けると、divが繰り返しスライドインおよびスライドアウトすることです。とにかくこれを止めることができますか？

ありがとう

$('.pillars-wrapper').mouseenter(function() {
$('.handle').fadeOut();
    $('.tab-wrapper').animate({
    right: '+=175'
})
});

$('.pillars-wrapper').mouseleave(function() {
$('.tab-wrapper').animate({    
    right: '-=175'
});
$('.handle').fadeIn()
});

ここにフィドルがあります...

http://jsfiddle.net/FXAcP/

4

4 に答える 4

0

デモ http://jsfiddle.net/wVMu6/11/

申し訳ありませんが、あなたの古い投稿について - 2 分前に返信しましたが、削除されていることに気付きました。

また、メインコンテナとして持っていることに注意してください.tab-wrapper。ランダムなcssの問題が発生するかどうかについて言及すると思います。

これが役に立てば幸いです、乾杯！B-)

コード

 $('.pillars-wrapper').mouseenter(function() {
     $('.handle').fadeOut().stop();
    $('.tab-wrapper').animate({
        right: '+=175px'
    }, "slow").stop(true,true);

}).mouseleave(function() {

    $('.tab-wrapper').animate({
        right: '-=175px'
    }, "slow").stop(true,true);
    $('.handle').fadeIn().stop();

});​
于 2012-06-18T10:27:23.747 に答える
0

.clearQueue() を追加してみてください。

たとえば、代わりに

$('.tab-wrapper').animate({

行う

 $('.tab-wrapper').clearQueue().animate({

詳細については、こちらをご覧ください。

于 2012-06-18T10:21:09.523 に答える
0

アニメーションの適切な動きをする時間を提供できます。

たとえば、スライドの速度を遅くするには、animate で「slow」パラメーターを使用します。

$('.tab-wrapper').animate({
      right: '-=175'
  },'slow');

ここで jquery のアニメーション ドキュメントを読む必要があるかもしれません。

于 2012-06-18T10:22:32.500 に答える
0

これは私がこの問題をどのように解決したかの例です:

$("#menu-balticpoint li").mouseover(function() {

                var id = $(this).attr('id');
                var width = $("#"+id+" a").width();
                $("#"+id+" ul li a").css("width", width+"px");
                $("#"+id+" ul").slideDown('fast').show();
        $(this).hover(function() {
        }, function(){
            $("#"+id+" ul").fadeOut('slow').hide().stop(true, true); //When the mouse hovers out of the subnav, move it back up
        });
        });
于 2012-06-18T10:20:11.140 に答える