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>

为什么动画的回调函数（完成）在开始时执行？

1 个答案: