javascript - 如何在某些设备宽度以下禁用 JQuery？

Question

我希望在移动设备宽度(768 像素及以下)下停止 JQuery 函数。我曾尝试使用 $(window).width() 检测屏幕宽度，然后使用 if 语句，但似乎无法正常工作。

$(document).ready(function(){
  var resolution = $(window).width();
  if (resolution >= 768) {
    $('.img-1').hover(function(){
        $(this).animate({right: "350px"},1000);
        $('#desc1').show(1000);
    });
    $('.img-1').mouseleave(function(){
        $(this).animate({right: "0px"},1000);
        $('#desc1').hide(1000);
    });
  } else {
    // NO SCRIPT
  }
});

这是它的代码笔的链接:http://codepen.io/SRBET/pen/dOJoJb/

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

试试这个:

var resolution = $(window).width();
if (resolution > 768) {

  $(document).ready(function(){

  $('.img-1').hover(function(){
     $(this).animate({right: "350px"},1000);
     $('#desc1').show(1000);
 });
 $('.img-1').mouseleave(function(){
    $(this).animate({right: "0px"},1000);
    $('#desc1').hide(1000);
 });
});

} else {
// NO SCRIPT
}

在就绪函数之前使用 if 条件。它在代码面板中工作(我已经在 chrome 上试过了)。如果您不希望它在 768px 上工作，也可以删除等号。