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

Posted 2023-05-08

【中文标题】如何阻止 jQuery 函数在较小的屏幕上执行？

【英文标题】：How can I stop a jQuery function from executing on smaller screens?

【发布时间】：2016-06-03 04:57:22

【问题描述】：

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

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

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

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

【问题讨论】：

语法错误和清除混淆。

【参考方案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 文件。

【讨论】：

感谢您的快速响应，但它对我不起作用。这是代码：

非常感谢，我已经想通了。这是此现场示例的链接 www.kirandip.com，任何 cmets 将不胜感激。