Javascript 我不知道为什么这个JQuery动画不起作用

好的，基本上我有3个div，叫做first，nextscreen和finalscreen。我创建了一些jquery，当按下next或back时，它允许div滑入和滑出视图。按“下一步>>>和>”可从第一个屏幕设置动画到下一个屏幕，以从下一个屏幕设置动画到最后一个屏幕。当我转到时，我认为将这些元素放置在容器中并仅为其中一个元素而不是每个元素设置动画将更容易和有效。

console中有任何错误吗？没有，已经检查过了。现在添加了一个JSFIDLE。好的，但我需要所有3个元素来移动，而不仅仅是一个。是的，但是它们都以相同的方式移动，所以你保持所有元素都静止，并为容器设置动画，这样看起来就像你在为每个元素设置动画一样。好的，我看到了。我现在正忙着尝试，但它似乎不起作用，也就是说，现在什么都不动了，因为您正在设置“left”属性的动画，所以需要在css中设置#containment{position:absolute；}

<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>

$("#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' });
});