Question

好吧基本上我有3个div，称为first，nextscreen和finalscreen。我创建了一些jquery，允许div在下一个或后面按下时滑入或滑出视图。按下Next时的从第一屏幕到nextscreen的动画>＆gt;＆gt;和＆lt;＆lt;＆lt;返回工作，UNTIL我按下Next＆gt;＆gt;＆gt;从nextscreen到finalscreen的动画。当我去＆lt;＆lt;＆lt;从finalscreen返回到nextscreen，然后尝试去＆lt;＆lt;＆lt;从nextscreen返回到第一个，NEXTSCREEN SIMPLY不会移动。但是，如果我尝试将它向左滑动它确实有效，但是我需要它向右滑动，或者它看起来很傻。这是我的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' });
});

这是一个小提琴http://jsfiddle.net/yjZBe/

Answer 1

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

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

1 个答案: