Question

我正在尝试创建此导航，当我将鼠标悬停在它上面时触发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(); 
});

我似乎无法弄清楚为什么以及我应该如何解决它。

Answer 1

正如Joe在评论中所建议的那样，您应该检查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"
                });
            });
    });
});

注意：我没有测试过代码，因此我不知道它是否可以开箱即用。

Answer 2

另一种方法是使用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');
  }
});

Answer 3

使用鼠标事件非常有效。这就是我想出来的

$("#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");
        });
    }
}
});

jQuery window.resize没有触发

3 个答案: