使用 jQuery 承诺等待转换

Using jQuery promise to wait for transitions

本文关键字：转换 等待 承诺 jQuery 使用      更新时间：2023-09-26

我有一个包含 2 个div 的布局 - #lhs 和 #rhs 以及一个可以改变它们宽度的函数。两侧都有过渡，我想在他们完成设置宽度时做一些事情(在本例中 - 警报(

问题是警报在开始更改宽度时立即触发，而不是在

之后触发 
function setLHSWidth(percent){
    $("#lhs").css("width", percent + "%")
    $("#rhs").css("width", 100 - percent + "%");
}
$(document).ready(function(){
    $("button").on("click", function(){
     var percent = Math.random() * 100;
        setLHSWidth(percent);
        $("#lhs").promise().done(function(){
           alert('done!'); 
        });
    });
});
<div class="wrap">
    <div id="lhs">
    </div>
    <div id="rhs">
    </div>
</div>

这是玩 http://jsfiddle.net/xv43Lasy/1/的小提琴(更新了更长的过渡(

jQuery承诺只适用于jQuery执行的动画，而不适用于CSS过渡。

您可以：

  1. 使用 jQuery 本身来执行动画(最便携(，或者

  2. 赶上transitionend活动 - http://jsfiddle.net/alnitak/v7vn94ea/演示

有关后者的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/Events/transitionend。

相关文章：