调整大小时启用/禁用jquery调用
调整大小时启用/禁用jquery调用
提问于 2012-08-16 10:33:43
我正在建设一个响应式的网站，因此需要不同的功能取决于窗口的大小。
因此，如果屏幕宽度小于964px，我想禁用jquery调用。如果大于964px，我想启用相同调用。
这就是我得到的：http://jsfiddle.net/frogfacehead/2Mdem/1/
问题是，禁用部分不起作用。一旦它被启用，即使屏幕低于964px，它也不会禁用。
有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-08-16 10:52:22
与其使用所有这些资源在页面大小改变时将悬停函数附加到该元素，为什么不在这些回调函数中检查页面的大小呢？
$(".test").hover(function() {
if (width > 964) {
$(this).animate({
width: "100px"
})
}
}, etc.问题是您添加了一个函数来处理悬停事件，但该函数从未被删除。随着页面宽度的变化，您会重复添加它。只需添加它一次，然后检查该函数的处理程序中应该发生什么。作为正确工作的奖励，它应该更有效率一些。
Stack Overflow用户
发布于 2012-08-16 10:51:58
当屏幕尺寸大于964px时，您正在将动画绑定到.test元素，因此要解除绑定，您需要这样做
else {
$body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
$(".test").unbind("hover");
}Stack Overflow用户
发布于 2012-08-16 11:22:47
第一个问题是，您正在根据调整大小事件绑定将悬停/动画绑定队列加载到.test。
您的实现可能会得到改进(见下文)，但如果您想要在调整大小完成时触发函数调用，请考虑以下几点。
var resizeTimeout;
$win.resize(function() {
clearTimeout(resizeTimeout);
// handle normal resize as needed
resizeTimeout = setTimeout(function() {
// handle after finished resize
checkwidth($win.width());
}, 250); // delay by quarter second
});您可以考虑使用这种方法：
// pull hover binding out, setup once to prevent building up queue
$(".test").hover(function() {
if( $(".test").data('annimate') ){
$(this).animate({
width: "100px"
});
}
}, function() {
if( $(".test").data('annimate') ){
$(this).animate({
width: "50px"
});
}
});
function checkwidth(mywidth) {
if (mywidth > 964) {
$body.html('Viewport is <strong>' + mywidth + 'px</strong> wide. <span class="enable">[Enable Animation]</span>');
// set flag to allow annimation
$(".test").data('annimate', true);
} else {
$body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
// set flag to prevent annimation
$(".test").data('annimate', false);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11979954
复制相关文章
相似问题
腾讯云开发者
