如何实现Div完成左滑动画后再设置display:none隐藏？

嘿，我明白你遇到的问题了！你现在的代码里，animate是异步执行的——也就是说，它不会等动画做完才继续跑后面的display:none代码，而是刚启动动画就立刻把元素隐藏了，所以你看不到滑动效果。而你写的wait函数是同步阻塞的，它会占着JS线程一直循环，浏览器根本没时间去渲染动画，最后等时间到了直接隐藏，自然也看不到滑动过程。

给你两个靠谱的解决方案，都是利用jQuery动画的异步回调机制，保证动画完全结束后再隐藏元素：

方法1：使用animate的complete回调参数 #

这是最直接的方式，把隐藏元素的逻辑放在动画的complete回调里，这个回调会在动画100%完成后才执行：

function slide_in(current_my) {
  $("#" + current_my).animate(
    { left: "510" }, // 动画属性
    { 
      duration: 750, // 动画时长
      complete: function() {
        // 动画结束后执行：隐藏元素
        $(this).hide(); // 等价于$(this).css("display", "none");
      }
    }
  );
}

方法2：使用promise链式调用 #

如果你的代码逻辑比较复杂，需要串联多个异步操作，用promise的方式会更灵活：

function slide_in(current_my) {
  $("#" + current_my)
    .animate({ left: "510" }, 750) // 启动动画
    .promise() // 获取动画的promise对象
    .done(function() {
      // 动画完成后执行隐藏
      $(this).hide();
    });
}

这两种方法都能完美实现你要的“先滑动，再隐藏”的效果，再也不会出现动画被跳过的问题啦～

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