javascript - 为什么 animate 的回调函数(完成)在开始时执行？

Question

重复:

是的，但与 this 有点不同.

我正在使用 jQuery 3.1.0 这是我的代码:

$(document).ready(function () {
    ToggleAsideBar();
});

function ToggleAsideBar(){
$(".ah-sidebar-toggle").click(function(){
    let toggleSize = $(".ah-logo").width() == 230 ? "50px" : "230px";
    $(".ah-logo").animate(
      { width: toggleSize },200,"linear",function () {alert("Animation Complete!");'}
    );
  });
}

问题:

在我的例子中，在动画开始之前显示警报。我想在动画完成后显示警报。有没有想过我在上面的代码中做错了什么？

实例:

jsfiddle

Answer 1

你在 jquery 的 animation 和 css 的 transition 之间发生了冲突。
如果您决定使用 animate - 您应该从您的 css 文件中删除 transition 行。

这是一个工作版本(在你的 css 中没有转换):

$(document).ready(function () {
  ToggleAsideBar();
});
function ToggleAsideBar(){
  //Get width of browser
  $(".ah-logo").click(function(){
        let toggleSize = $(".ah-logo").width() == 230 ? "50px" : "230px";
        $(".ah-logo").animate(
          { width: toggleSize },200,"swing"
        ).promise().done(function(){
            alert("Animation Complete!");
          });
  });
  
}

.ah-logo {
  width: 230px;
    
    float: left;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    
}

a {
  line-height: 50px;
  display: block;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="ah-logo">
<a href="#">Admin</a>
</div>