Question

所以，我正在尝试在调整页面大小时制作流畅的导航栏动画。当页面为1500 + px宽度且小于1500px时，它应该是这样的。

这是我用来设置转换动画的jquery代码：

       $(window).on('resize', function(){
           if($(this).width() <= 1500){
               $('#visas').animate({'margin-left':'0%', 'margin-right':'0%'});
           }
           if($(this).width() >1500){
               $('#visas').animate({'margin-left':'20%', 'margin-right':'20%'});
           } 
        });

当我将页面调整为少于1500px时，有时会发生动画，但是当我尝试将页面调整为更多时，1500px的边距不会改变。

Answer 1

不是在jQuery中使用CSS而是使用带有转换和媒体查询的CSS：

#visas {
  height: 50px;
  background: #bada55;
  margin: 0%;
  transition: margin .5s ease;
}

@media (min-width: 500px) {
  #visas {
    margin: 0 20%;
  }
}

jsFiddle：https://jsfiddle.net/ukwybf9g/

Answer 2

您需要使用媒体查询。像这样：

@media (max-width:1500px){
   .nav{
      width: 100%;
      margin:0 auto;
   }
}

在我的演示中，我使用1200px作为我的测试点，因为我的笔记本电脑并没有超过1500px，但你会明白这一点。只需将1200px断点更改为1500px。

P.S。熟悉Bootstrap。借助响应式框架，您可以更轻松地完成这些工作

参见演示HERE

通过jquery动画边距

2 个答案: