3

非常に簡単に下にスライドするナビゲーション バーがあり、それが完了すると、小さなピクセル サイズの線が全体を横切り、サブ ページを分離します。

マウスをその上にすばやく移動すると、表示されたままになる傾向があります。フィルター機能と停止機能からわかるように、私は飛び跳ねるようなことが起こらないようにしたいと思っています。

これをスムーズに機能させる方法はありますか?

$(".menu").hover(function() {
    $(".children").filter(':hidden').slideDown(300, function() {
        $(".menu-line").stop(true, false).animate({ width: "903px" });
    });
}, function() {
    $(".menu-line").stop(true, false).animate({ width: "0px" }, function() {
        $(".children").slideUp(300);
    });
});

作業例: http://jsfiddle.net/varFS/

4

1 に答える 1

0

チタン、目的の結果を得るには、メニューを非表示にするためにタイムアウトを使用する必要があります。

$(".children").css("padding-top", "21px").hide();
$(".menu").hover(function() {
    $(".children").filter(':hidden').slideDown(300, function() {
        $(".menu-line").stop(true, false).animate({
            width: "400px"
        });
    });
}, function() {
    setTimeout(function() {
        if (!$(".menu, .menu ul, .menu ul li").is(':focus')) {
            $(".children").css("padding-top", "21px").hide();
        }
        $(".menu-line").stop(true, false).animate({
            width: "0px"
        }, function() {
            $(".children").slideUp(300);
        });
    }, 400);
});​

実例

于 2012-09-13T07:48:15.127 に答える