javascript - 使用 jQuery promise 等待转换

Question

我有一个包含 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>

这是可以玩的 fiddle http://jsfiddle.net/xv43Lasy/1/ (更新了更长的过渡)

Answer 1

jQuery promise 仅适用于 jQuery 执行的动画，而不适用于 CSS 转换。

您可以:

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

2. 捕捉 transitionend 事件 - 演示地址 http://jsfiddle.net/alnitak/v7vn94ea/

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