jquery - 将DIVs Bottom-Position和Height改为0，一个接一个，顺利

Question

我想将一个 DIV 位置依次设置为 bottom = 0 和 height = 0，以便第一个动画以相同的速度平滑地跟随第二个动画。问题是 DIV 会根据内容调整其高度，因此当我对两个动画使用相同的持续时间时，速度会有所不同。

对我来说很难用语言来形容它；这是链接:

$(document).ready(function () {

    $("#box").click(function () {
        $("#brief").animate({
            bottom: "0px",
        }, 1500, function () {

            $("#brief").animate({
                height: "0px",
            }, 1500, function () {

                $("#open, #openBG").delay(500).hide();
                setTimeout(function () {
                    alert("HEY!");
                }, 800);

            });
        });
    });
});

http://jsfiddle.net/hausmaster/ED4WK/1/#run

非常感谢! :)

Answer 1

如果我没有正确理解你的问题，下面的方法对你有用吗？

$("#box").click(function () {
    $("#brief").animate({bottom: "0px",}, 1500).animate({height: "0px"}, 1500);
    $("#open, #openBG").delay(3500).fadeOut(0);
});

通过在 jQuery 中顺序添加一个事件，后一个事件在前一个事件结束后开始。

旁注:greenSock 的 TweenMax 应该是个不错的把戏。当涉及定时动画时更容易处理，特别是在相同和/或不同的元素上。如果您需要了解更多信息，请告诉我。