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

Question

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

我知道 bootstrap 已经内置了媒体查询，但我该怎么做。

检查网站并将浏览器缩小到手机大小，您会看到列表按钮出现，但里面的链接仍然相同。

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

谢谢

这里是负责动画的代码：

$(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'
    })
  });
});

Answer 1

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

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

当然，您可以将480px 更改为您想要的任何内容，甚至可以更改为check for other properties。