I have an slider animation but on clX.click event #close div hides before it is animated -250px left. How to wait till the animation completes and then hide #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)
var closeable = $('#close');
$('#clx').bind('click', function(){
// $(this) === $('#clx')
closeable.stop().animate({marginLeft:'-250px'},{
duration: 500,
complete: function(){
$(this).hide();
// $(this) === closeable;
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With