我有一个包含 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过渡。
您可以:
-
使用 jQuery 本身来执行动画(最便携(,或者
-
赶上
transitionend
活动 - http://jsfiddle.net/alnitak/v7vn94ea/演示
有关后者的更多信息,请参阅 https://developer.mozilla.org/en-US/docs/Web/Events/transitionend。