javascript - 不知道为什么这个 JQuery 动画不起作用

Question

好的，基本上我有 3 个 div，分别称为 first、nextscreen 和 finalscreen。我创建了一些 jquery，允许 div 在按下下一步或返回时滑入和滑出 View 。按 Next >>> 和 <<< Back 时从第一个屏幕动画到下一个屏幕，直到我按 Next >>> 从下一个屏幕动画到最终屏幕。当我 <<< 从 finalscreen 返回到 nextscreen，然后尝试 <<< 从 nextscreen 返回到 first 时，NEXTSCREEN 根本不会移动。但是，如果我尝试让它向左滑出，它确实有效，但我需要它向右滑出，否则它看起来很傻。这是我的 html:

<div class="row">
    <div class="col-lg-12" id="first" style="position: relative; right: 0px">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <div class="form-group">
                <label for="tableName">Name</label>
                <input type="text" class="form-control" id="tableName" name="tableName" placeholder="Name your list..." />
            </div>
            <div class="form-group">
                <label for="Description">Description</label>
                <textarea class="form-control" id="Description" name="Description" placeholder="Provide a brief description of this list..." rows="3"></textarea>
            </div>
            <button type="button" class="btn btn-default" id="next">Next >>></button>
        </div>
    </div>
    <div class="col-lg-12" id="nextscreen" style="right: -2000px; top: -220px; position: relative">
        <div class="col-lg-6">
            <div class="form-group">
                <label for="addField">Add Field</label>
                <input type="text" class="form-control" id="addField" placeholder="Field Name..." />
            </div>
            <button type="button" class="btn btn-default" id="add">Add Field >>></button>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label for="fieldList">Field List</label>
                <select multiple class="form-control" id="fieldList" style="height: 200px">
                    <option>Name*</option>
                    <option>Cell*</option>
                </select>
            </div>
            <p>* Compulsory fields</p>
            <button type="button" class="btn btn-default" id="back"><<< Back</button>
            <button type="button" class="btn btn-default" id="final">Next >>></button>
            <button type="button" class="btn btn-default pull-right" id="remove"><<< Remove Field</button>
            <input type="hidden" name="SelectedOptions" id="Name" value="Name" />
            <input type="hidden" name="SelectedOptions" id="Cell" value="Cell" />
        </div>
    </div>
    <div class="col-lg-12" id="finalscreen" style="right: -4000px; top: 0px; position: relative">
        <div class="form-group">
            <button class="btn btn-primary" type="submit" id="createtable">Create Table</button>
            <button type="button" class="btn btn-default" id="finalback"><<< Back</button>
        </div>
    </div>
</div>

这是我的 JQuery:

$("#next").click(function () {
    $("#first").animate({ left: '-2000px' });
    $("#nextscreen").animate({ right: '0px' });
    $("#finalscreen").animate({ right: '-2000px' });
});

$("#final").click(function () {
    $("#first").animate({ left: '-4000px' });
    $("#nextscreen").animate({ left: '-2000px' });
    $("#finalscreen").animate({ right: '0px' });
});

$("#back").click(function () {
    $("#first").animate({ left: '0px' });
    $("#nextscreen").animate({ right: '-2000px' })
    $("#finalscreen").animate({ right: '-4000px' });
});

$("#finalback").click(function () {
    $("#first").animate({ left: '-2000px' });
    $("#nextscreen").animate({ left: '0px' });
    $("#finalscreen").animate({ right: '-2000px' });
});

这是一个 fiddle http://jsfiddle.net/yjZBe/

Answer 1

我认为将这些元素放在一个容器中并只为那个元素而不是每个元素设置动画会更容易和高效。