jQuery window.resize not triggering

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