jquery - 通过 jquery 动画边距

Question

因此，我试图在调整页面大小时制作流畅的导航栏动画。这是页面宽度为 1500+px 且小于 1500px 时的样子。

this is 1500px+ width

this is less then 1500px width

这是我用来制作过渡动画的 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%'});
           } 
        });

当我将页面调整到小于 1500 像素时，动画有时会发生，但当我尝试将页面调整到大于 1500 像素时，边距不会改变。

Answer 1

不要在 jQuery 中使用带有转换和媒体查询的 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/