如何阻止 jQuery 函数在较小的屏幕上执行？

Question

我正在使用 Jquery 为一行文本设置动画，我想在某个窗口大小处停止。当屏幕宽度低于某个值时，我想停止我的函数运行。

我不明白确切的方法应该是什么？代码如下：

<h1 class="tlt">Thr brown fox jumped over the grizzely</h1>

<script type="text/javascript">
  $('.tlt').textillate();
</script>

Answer 1

你可以做

  $(window).height()
  $(window).width()

动画的条件。

喜欢..

 // check if window size changed
   $(window).resize(function() {
    if($(window).height() < 800 && $(window).width() < 600){
      $('.tlt').textillate();
    }
   });

它只会在你的条件下执行。

希望这是你所要求的。

更多信息：How can I detect window size with jQuery?

编辑：

<h1 class="tlt">Thr brown fox jumped over the grizzely</h1> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript"> 
    if($(window).height() > 600 && $(window).width() > 800) 
        $('.tlt').textillate();

$(window).resize(function() { 
    if($(window).height() > 600 && $(window).width() > 800) 
        $('.tlt').textillate(); 

    else
        $('.tlt').textillate('stop');
}); 
</script>

首先，它首先检查窗口的高度/宽度，然后启动或不启动 textillate 函数。然后，每次调整窗口大小时，它都会再次检查。如果它不在高度/宽度区域，它会停止，否则，它将开始/继续。我已经尝试过了，它对我有用。当然，您必须包含您的 textillate 文件。