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

正如乔在评论中所建议的那样，您应该检查窗口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 回答
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 回答