为什么我的jQuery不响应窗口大小调整？

我正在使用jQuery在页面转换时添加一些元素（通过jQuery Transit插件）。 由于我正在尝试响应式设计，我希望这些转换仅在浏览器具有特定大小或更大时才会发生。

我写了以下代码作为尝试这样做：

$(document).ready(function(){ var $window = $(window); var $logo = $('.logo'); function checkWidth() { windowsize = $window.width(); } checkWidth(); $(window).resize(checkWidth); if (windowsize >= 768) { $logo.hoverIntent( function(){ $logo.transition({ perspective: '600px', rotateY: '-10deg' }); }, function(){ $logo.transition({ perspective: '600px', rotateY: '0deg' }); } ); } }); 

如果我在大型浏览器中加载页面，它会按预期工作 – hover效果处于活动状态。 如果我调整浏览器的大小，使其缩小（超过断点）并刷新，则可以正常工作 – 禁用hover效果。 但是如果我在没有刷新的情况下调整窗口的大小，则效果不会响应 – 它要么保持禁用（如果从小屏幕调整大屏幕），要么保持活动状态（如果从大到小resize）。

当然，这是一个小怪癖，但我无法弄清楚为什么会发生这种情况。 据我所知，当窗口resize时，它应该更新windowsize变量， 应该在if语句中检查。 我忽略了什么使得情况并非如此？

谢谢你们。

Answer 1

当前所有checkWidth都为checkWidth赋值。 您需要将实际读取windowsize的代码移动到checkWidth 。

 $(document).ready(function(){ var $window = $(window); var $logo = $('.logo'); function checkWidth() { windowsize = $window.width(); if (windowsize >= 768) { $logo.hoverIntent( function(){ $logo.transition({ perspective: '600px', rotateY: '-10deg' }); }, function(){ $logo.transition({ perspective: '600px', rotateY: '0deg' }); } ); } } // can trigger the resize handler instead of // explicitly calling checkWidth() $(window).resize(checkWidth).resize(); });