仅对非手机大小的设备使用 jQuery 动画

Use jQuery animation only for non-phone size devices

本文关键字：jQuery 动画 手机      更新时间：2023-09-26

我已经为客户构建并上传了这个网站。我使用Twitter引导程序并对其进行了自定义。我的问题是它有jquery来动画链接的导航。但是，我希望它在屏幕尺寸下降到手机尺寸时禁用并恢复为垂直列表。

我知道引导程序已经内置了媒体查询，但我该怎么做。

检查网站并将浏览器缩小到移动大小，您将看到出现列表按钮，但内部链接仍然相同。

不确定我是否已经非常清楚地表达了我的观点，但更多信息请询问。

谢谢

以下是负责动画的代码：

$(document).ready(function () {
  //When mouse rolls over
  $(".blue").mouseover(function () {
    $(this).stop().animate({
      height: '100px'
    }, {
      queue: false,
      duration: 1200,
      easing: 'easeOutBounce'
    })
  });
  //When mouse is removed
  $(".blue").mouseout(function () {
    $(this).stop().animate({
      height: '50px'
    }, {
      queue: false,
      duration: 1200,
      easing: 'easeOutBounce'
    })
  });
});

尝试matchMedia()仅在小视口上应用动画：

if (window.matchMedia("(max-width: 480px)").matches) {
  /* do animation here */
}

当然，您可以将480px更改为您想要的任何内容，甚至可以检查其他属性。

相关文章：