[英]Why doesn't my jQuery respond to window resize?
I'm using jQuery to add some make some elements on a page transition (via the jQuery Transit plugin) when hovered upon. 悬停时,我正在使用jQuery在页面转换(通过jQuery Transit插件)上添加一些元素。 Since I'm trying to design responsively, I want these transitions to only happen when the browser is a certain size or larger.
由于我正在尝试进行响应式设计,因此我希望仅当浏览器为特定尺寸或更大时才发生这些转换。
I've written the following code as an attempt to do this: 我编写了以下代码来尝试执行此操作:
$(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'
});
}
);
}
});
If I load the page in a large browser, it works as expected--the hover effect is active. 如果我在大型浏览器中加载页面,则它会按预期工作-悬停效果处于活动状态。 If I resize the browser, making it smaller (past the breakpoint) and refresh, then it works--the hover effect is disabled.
如果我调整浏览器的大小,使其更小(通过断点)并刷新,则它可以工作-悬停效果已禁用。 But if I resize the window without refreshing in between, then the effect doesn't respond--it either remains disabled (if resizing from a small to a large screen) or active (if resizing from large to small).
但是,如果我调整窗口大小而不在其间刷新,则效果不会响应-要么保持禁用状态(如果从小屏幕调整为大屏幕),要么处于活动状态(如果从大屏幕调整为小屏幕)。
It's a minor quirk, to be sure, but I can't exactly figure out why it's happening. 可以肯定的是,这是一个小怪癖,但我无法确切弄清楚为什么会这样。 As far as I can tell, when the window resizes, it should be updating the
windowsize
variable, which should be checked in the if
statement. 据我所知,当窗口调整大小时, 应该更新
windowsize
变量,该变量应在if
语句中进行检查。 What am I overlooking that makes this not the case? 我忽略了什么使得情况并非如此?
Thanks a bunch. 谢谢你
All checkWidth
currently does is assign a value to windowsize
. checkWidth
当前所做的只是为windowsize
分配一个值。 You need to move the code that actually reads windowsize
into 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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.