如何结合使用jQuery的css与animate方法实现容器从左侧滑入效果

• jQuery的animate方法会自动将display: none的元素设为display: block后再执行动画，如果你的#container初始没有设置宽度为0，就会先瞬间显示完整宽度的容器，再执行后续的宽和边距动画，也就是你遇到的“先直接显示隐藏容器”的问题。
• 你当前代码把display: block的设置放在了动画结束回调里，属于逻辑完全倒置：动画执行全程容器本来已经被animate自动设为显示状态，回调里的设置完全没用，如果你没有配置初始宽度为0，就会出现先显示、再动画的问题。
• 缺少必要的CSS配置：从左侧展开的效果需要容器设置overflow: hidden，避免宽度较小时内容溢出外露，破坏动画效果。

1. 配置#container初始CSS #

#container {
  display: none;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  /* 保留你原本的其他样式，比如高度、背景色等 */
}

2. 修改JS代码 #

jQuery(document).ready(function (){
  jQuery("#filterOpen").click(function() {
    jQuery("#container").animate({
      width: '20%',
      marginLeft: '+=500px'
    }, 500);
  });
});

如果你需要的是容器宽度固定为20%、从视口左侧外部滑入的效果，可以用以下配置：

对应CSS #

#container {
  display: none;
  width: 20%;
  margin-left: -20%;
  overflow: hidden;
}

对应JS #

jQuery(document).ready(function (){
  jQuery("#filterOpen").click(function() {
    jQuery("#container").animate({
      marginLeft: '0'
    }, 500);
  });
});

内容的提问来源于stack exchange，提问作者Ferhat