3

このWordpressテーマの開発を終えたところです：http： //www.minnesdiner.com/

すべてがうまく機能していますが、ナビゲーションに100％満足しているわけではありません。スライド位置インジケーターはスムーズに機能しますが、ホバーインテントjQueryプラグインを統合して、ユーザーが意図せずにナビゲーションを通過したときにスライドインジケーターがスライドしないようにしたいと思います。

このプラグインを統合する方法について何かアイデアはありますか？現在、ナビゲーションアイテムごとに個別のjQuery関数を起動し、ホバーされているアイテムに基づいてスライディングインジケーターに座標を渡します。

これが私の現在のjQueryコードです：

 $(document).ready(function() {

        var $currentpos = $("#menu-indicator").css("left");
        $("#menu-indicator").data('storedpos', $currentpos);

        $(".current-menu-item").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: $currentpos}, 150);
        });
        $(".menu-item-26").delay(500).mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "52px"}, 150);
        });
        $(".menu-item-121").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "180px"}, 150);
        });
        $(".menu-item-29").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "310px"}, 150);
        });
        $(".menu-item-55").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "440px"}, 150);
        });
        $(".menu-item-27").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "570px"}, 150);
        });
        $(".menu-item-164").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "760px"}, 150);
        });

        $delayamt = 400;
        $("#header-row2").click(function () {
        $delayamt = 5000;
        });
        $("#header-row2").mouseleave(function () {
        $("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600);
        });

});

ご覧のとおり、mousoverとmouseoutを別々の要素（list-itemと含むdiv）にバインドする必要があります。

ありがとう！

4

1 に答える 1

5

ユーザーがナビゲーションにマウスを合わせてスライドをトリガーしないようにするだけsetTimeoutの場合は、ホバー関数を使用して、一定の時間が経過した後にスライドコードを呼び出し、mouseoutイベントのタイムアウトをクリアします。追加のプラグインは必要ありません。

例えば：

var hover_timer;
$('.menu-item').hover(
    function() {
        hover_timer = setTimeout(function() { 
            ... 
        }, 500);
    },
    function() { clearTimeout(hover_timer); }
);

編集： byによって、これらすべてのホバー機能を1つに結合する必要があります。あなたは次のようなことをすることができます：

$('.menu-item-26').data('slider-pos', '52px');
$('.menu-item-121').data('slider-pos', '180px');
...

次に、スライドするコードで、コールバックします。

$this = $(this);
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150);

そして、それはほんの始まりに過ぎません-あなたはそれをさらに一般化することができます、私は賭けます。

于 2011-04-28T04:30:32.403 に答える