0

ホバーするとjQueryアニメーションをトリガーするこのナビゲーションを作成しようとしています。ブラウザ ウィンドウが 995 ピクセル未満の場合、ホバー機能を削除しようとしています。ブラウザをリロードしたときにのみ、ウィンドウのサイズ変更に関する機能は削除されません。

$(window).resize(function() { 
if ($(this).width() > 995) {
  $("#main-nav a").hover(function() {
        if (!$(this).hasClass('active')) {
            $(this).dequeue().stop().animate({
            padding: "2px 4px 0px 83px", 
            backgroundColor: "#47c7ee", 
            color: "#ffffff"});
        }
    }, function() {
        if (!$(this).hasClass('active')) {
            $(this).addClass('animated').animate({
                padding: "2px 4px 0 53px", 
                backgroundColor: "#ffffff", 
                color: "#a9a9a9"
            },
            "normal", "linear", function() {
                $(this).removeClass('animated').dequeue();
                $(".active").css({
                    "background-color": "#47c7ee",
                    "color": "#ffffff",
                    "padding": "2px 4px 0px 83px"
                });
            });
        }
    });
    }
});

次に、ウィンドウのリロード時にここで呼び出しています。

$(document).ready(function() { 
    $(window).resize(); 
});

なぜ、どのように修正する必要があるのか​​ わからないようです。

4

3 に答える 3

0

マウスイベントの使用は完全に機能しました。これが私が思いついたものです

$("#main-nav a").on('mouseenter mouseleave', function(e) {

var $this = $(this);

if (!$(this).hasClass('active') && ($(window).width() > 995)) {

    if (e.type === 'mouseenter') {
        $(this).dequeue().stop().animate({
            padding: "2px 4px 0px 83px",
            backgroundColor: "#47c7ee",
            color: "#ffffff"
        });
    } else {
        $(this).addClass('animated').animate({
            padding: "2px 4px 0 53px",
            backgroundColor: "#ffffff",
            color: "#a9a9a9"
        }, "normal", "linear", function() {
            $(this).removeClass('animated').dequeue();
            $(".active").css({
                "background-color": "#47c7ee",
                "color": "#ffffff",
                "padding": "2px 4px 0px 83px"
            });
            $("#main-nav a").removeAttr("style");
        });
    }
}
});
于 2013-06-17T07:39:54.520 に答える
0

コメントでジョーが提案したようにmouseenter、mouseleave代わりにウィンドウサイズを確認する必要があります。このようなもの：

$("#main-nav a").on("mouseenter mouseleave", function(e) {
    var $this = $(this);
    // Don't do anything if window size is less than 995px or
    // if the anchor has the active class
    if ($(window).width() < 995 || !$this.hasClass('active')) return;

    if (e.type === "mouseenter") {
        $this.dequeue().stop().animate({
                padding: "2px 4px 0px 83px", 
                backgroundColor: "#47c7ee", 
                color: "#ffffff"});
            });
    } else {
        $this.addClass('animated').animate({
                padding: "2px 4px 0 53px", 
                backgroundColor: "#ffffff", 
                color: "#a9a9a9"
            },
            "normal", "linear", function() {
                $(this).removeClass('animated').dequeue();
                $(".active").css({
                    "background-color": "#47c7ee",
                    "color": "#ffffff",
                    "padding": "2px 4px 0px 83px"
                });
            });
    });
});

注: コードをテストしていないため、すぐに使用できるかどうかはわかりません。

于 2013-06-16T21:16:59.660 に答える
0

別のアプローチは、 mediaCheckのようなものを使用することです。995px を超えたときの入口と出口の関数を定義するだけです。

mediaCheck({
  media: '(max-width: 995px)',
  entry: function() {
    console.log('starting 955');
  },
  exit: function() {
    console.log('leaving 955');
  },
  both: function() {
    console.log('changing state');
  }
});
于 2013-06-16T21:34:47.923 に答える