[英]jQuery event order and waiting till animation complete
I have an slider animation but on clX.click event #close div hides before it is animated -250px left. 我有一个滑块动画但在clX.click事件#close div隐藏之前它是动画-250px。 How to wait till the animation completes and then hide #close div? 如何等到动画完成然后隐藏#close div?
$(document).ready(function() {
$("#open").click(function() {
if ($("#close").is(":hidden")) {
$("#open").animate({
marginLeft: "-32px"
}, 200);
$("#close").show();
$("#close").animate({
marginLeft: "250px"
}, 500);
}
});
$("#clX").click(function() {
$("#close").animate({
marginLeft: "-250px"
}, 500);
$("#open").animate({
marginLeft: "0px"
}, 200);
$("#close").hide();
});
});
You can add a callback function to the animation. 您可以向动画添加回调函数。 It would be fired once the animation is finished. 动画结束后会被触发。
$('#clX').click(function() {
$('#close').animate({
marginLeft: "-250px"
}, 500, function() {
// Animation complete.
$("#close").hide();
//i supose $this.hide() <br/>would work also and it is more efficient.
});
});
@hasan, methinks @patxi meant $(this) @hasan,methinks @patxi意味着$(this)
var closeable = $('#close');
$('#clx').bind('click', function(){
// $(this) === $('#clx')
closeable.stop().animate({marginLeft:'-250px'},{
duration: 500,
complete: function(){
$(this).hide();
// $(this) === closeable;
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.