-1

我已经为客户建立并上传了这个网站。我使用了 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'
    })
  });
});
4

1 回答 1

1

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

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

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

于 2013-09-29T13:47:35.537 回答