jQuery事件顺序并等待动画完成 [英] jQuery event order and waiting till animation complete

问题描述

我有一个滑块动画，但是在clX.click事件中，＃close div会在动画放置-250px之前隐藏。如何等到动画完成然后隐藏#close div？

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.
  });
});

这篇关于jQuery事件顺序并等待动画完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！