爲什麼在開始時執行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>