为什么在开始时执行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的转变之间的碰撞。
如果你决定使用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>