Question

有人可以帮助我将这一系列的JS动画步骤变成一个循环，其中只有前三行一起使用＆＃34; top＆＃34;元素将减少50直到达到50，然后循环结束。我创造了一个小提琴来演示我需要它如何工作。 http://jsfiddle.net/Nr5G5/6/。我已经尝试了所有我知道的工作，但这超出了我的知识范围。

$( "#left_door" ).animate({ "width": "10%" }, 2000);
$( "#left_door" ).animate({ "width": "100%" }, 3000, function(){
$( "#elevator" ).animate({ "top": "450px" }, 3000, function(){...

在我的尝试中http://jsfiddle.net/Nr5G5/7/门打开并关闭，而div div正在移动，我正试图让门等待div在停止之前停止

感谢您的帮助！

Answer 1

主要问题是你不是在等待上一次换楼才能完成。可能可以修复以继续使用while循环，但是，我发现将功能拆分为带回调的函数更容易。

为了简单起见，我还将门的初始状态更改为开放状态，您可能希望将其更改为关闭并在开始第一步之前将其打开和关闭。甚至可能将门的打开和关闭移动到它自己的功能中。

var current_floor = -1,
    floor_stops = ["400", "300", "250"],
    moving = false;

function changeFloor(floor, callback) {
    if (floor === current_floor || moving) {
        callback();
        return;
    }
    moving = true;
    $("#left_door").animate({width: "100%"}, 3000, function () {
        $("#elevator").animate({top: floor_stops[floor]}, 5000, function () {
            $("#left_door").animate({width: "10%"}, 2000, function() {
                moving = false;
                current_floor = floor;
                callback();
            });
        });
    });
}

$("#start_btn").click(function () {
    changeFloor(0, function(){
        changeFloor(1, function(){
            changeFloor(2, $.noop);
        });
    });
});

// this is extra, it just creates floor buttons
floor_stops.forEach(function (top, i) {
    var btn = document.createElement("button");
    btn.innerHTML = "Floor " + i;
    btn.addEventListener("click", function () {
        changeFloor(i, $.noop);
    }, false);
    btn.style.position = "absolute";
    btn.style.top = top + "px";
    btn.style.left = 0;
    document.body.appendChild(btn);
});

http://jsfiddle.net/Nr5G5/10/

动画与回调

1 个答案: