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>

这是与http://jsfiddle.net/xv43Lasy/1/一起玩的小提琴（用更长的过渡更新）

Answer 1

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

你可以：

使用jQuery本身来执行动画（最便携），或
抓住transitionend事件 - 演示http://jsfiddle.net/alnitak/v7vn94ea/

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

使用jQuery承诺等待转换

1 个答案: