在调整大小时启用/禁用jquery调用

我正在构建一个响应性强的站点，因此需要根据窗口大小提供不同的功能

因此，如果屏幕宽度小于964px，我想禁用jquery调用。如果超过964px，我想启用相同的调用

这就是我得到的：

问题是，禁用部分不工作。一旦启用，即使屏幕低于964px，也不会禁用

---

有什么想法吗？

当屏幕尺寸大于964px时，您正在将动画绑定到.test元素，因此要解除绑定，您需要执行以下操作

else {
        $body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
        $(".test").unbind("hover");
    }

else{
$body.html（'视口为'+mywidth+'px宽。[禁用动画]）；
$（“.test”）。解除绑定（“悬停”）；
}

与其在页面大小更改时使用所有这些资源将悬停函数附加到该元素，为什么不在这些回调函数期间检查页面大小

$(".test").hover(function() {
            if (width > 964) {
                $(this).animate({
                    width: "100px"
                })
            }
        }, etc.

---

问题是您添加了一个函数来处理悬停事件，但该函数从未被删除。随着页面宽度的变化，您会重复添加它。只需添加一次，然后检查该函数的处理程序中应该发生什么。作为正确工作的额外功能，它应该更高效。

第一个问题是，您正在将悬停/动画绑定队列加载到

。根据调整大小事件绑定进行测试

您的实现可以改进（见下文），但是如果您希望在调整大小完成时调用函数调用，请考虑以下内容：

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

//拉出悬停绑定，设置一次以防止建立队列
$（“.test”）.hover（函数（）{
如果（$（“.test”）.data（'annimate'））{
$（此）。设置动画({
宽度：“100px”
});
}
}，函数（）{
如果（$（“.test”）.data（'annimate'））{
$（此）。设置动画({
宽度：“50px”
});
}
});
函数检查宽度（mywidth）{
如果（mywidth>964）{
$body.html（'Viewport is'+mywidth+'pxwide.[Enable Animation]'）；
//将标志设置为允许Anniation
$（“.test”）.data（'annimate'，true）；
}否则{
$body.html（'视口为'+mywidth+'px宽。[禁用动画]）；
//设置标志以防止加密
$（“.test”）.data（'annimate'，false）；
}
}
请注意，当您在不引用回调函数的情况下调用unbind时，它将解除绑定到它的所有内容的绑定。这可能是需要的，但值得指出。