jQuery动画左：'-125%'；不起作用

我有一个向导，我正试图建立和动画只是不工作

    jQuery('#btnNext').on('click', function () {
        jQuery('#page_' + currentPage).animate(
            {
                left: '-125%'
            },
            200
        );
    });

在我的chrome调试器中，应用了left元素，但div根本不移动。我的CSS如下所示：

.wizard 
{
    display:block;
    overflow: hidden;
    padding: 0;
}
.wizardPage
{
    display: block;
    border: 1px solid gray;
    border-radius: 1em; 
    margin-bottom: 1em;
    width: 796px;
}
#btnFirst, #btnPrevious{ float: left; margin-right: 0.5em;}
#btnNext, #btnFinish{float: right; margin-left: 0.5em; }
.wizard .wizardPage, #pageNavigator .navButton
{
    display: none;
}
#pageNavigator{width: 796px;}

<div id="pageContainer" class="wizard">
    <div class="wizardPage" id="page_1">
        <div class="editLine">
            <label for="FirstName">
                First Name:</label>
            <input class="text-box single-line" data-val="true" data-val-length="The field First Name must be a string with a maximum length of 40."
                data-val-length-max="40" data-val-required="The First Name field is required."
                id="FirstName" name="FirstName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="MiddleName">
                Middle Name:</label>
            <input class="text-box single-line" data-val="true" data-val-length="The field Middle Name must be a string with a maximum length of 40."
                data-val-length-max="40" data-val-required="The Middle Name field is required."
                id="MiddleName" name="MiddleName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="MiddleName" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="LastName">
                Last Name:</label>
            <input class="text-box single-line" data-val="true" data-val-length="The field Last Name must be a string with a maximum length of 40."
                data-val-length-max="40" data-val-required="The Last Name field is required."
                id="LastName" name="LastName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="State" title="Due to state registration requirements, we are currently accepting investors from select states.">
                State of Residence:</label>
            <select name="State" id="State">
                <option value=""></option>
                <option value="AK" title="Alaska">AK</option>
                <option value="AL" title="Alabama">AL</option>
                <option value="AR" title="Arkansas">AR</option>
                <option value="AZ" title="Arizona">AZ</option>
                <option value="CA" title="California">CA</option>
                <option value="CO" title="Colorado">CO</option>
                <option value="CT" title="Connecticut">CT</option>
                <option value="DC" title="District of Columbia">DC</option>
                <option value="DE" title="Delaware">DE</option>
                <option value="FL" title="Florida">FL</option>
                <option value="GA" title="Georgia">GA</option>
                <option value="HI" title="Hawaii">HI</option>
                <option value="IA" title="Iowa">IA</option>
                <option value="ID" title="Idaho">ID</option>
                <option value="IL" title="Illinois">IL</option>
                <option value="IN" title="Indiana">IN</option>
                <option value="KS" title="Kansas">KS</option>
                <option value="KY" title="Kentucky">KY</option>
                <option value="LA" title="Louisiana">LA</option>
                <option value="MA" title="Massachusetts">MA</option>
                <option value="MD" title="Maryland">MD</option>
                <option value="ME" title="Maine">ME</option>
                <option value="MI" title="Michigan">MI</option>
                <option value="MN" title="Minnesota">MN</option>
                <option value="MO" title="Missouri">MO</option>
                <option value="MS" title="Mississippi">MS</option>
                <option value="MT" title="Montana">MT</option>
                <option value="NC" title="North Carolina">NC</option>
                <option value="ND" title="North Dakota">ND</option>
                <option value="NE" title="Nebraska">NE</option>
                <option value="NH" title="New Hampshire">NH</option>
                <option value="NJ" title="New Jersey">NJ</option>
                <option value="NM" title="New Mexico">NM</option>
                <option value="NV" title="Nevada">NV</option>
                <option value="NY" title="New York">NY</option>
                <option value="OH" title="Ohio">OH</option>
                <option value="OK" title="Oklahoma">OK</option>
                <option value="OR" title="Oregon">OR</option>
                <option value="PA" title="Pennsylvania">PA</option>
                <option value="RI" title="Rhode Island">RI</option>
                <option value="SC" title="South Carolina">SC</option>
                <option value="SD" title="South Dakota">SD</option>
                <option value="TN" title="Tennessee">TN</option>
                <option value="TX" title="Texas">TX</option>
                <option value="UT" title="Utah">UT</option>
                <option value="VA" title="Virginia">VA</option>
                <option value="VT" title="Vermont">VT</option>
                <option value="WA" title="Washington">WA</option>
                <option value="WI" title="Wisconsin">WI</option>
                <option value="WV" title="West Virginia">WV</option>
                <option value="WY" title="Wyoming">WY</option>
            </select>
            <span class="field-validation-valid" data-valmsg-for="State" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="BirthDate" title="You must be at least 18 years old to participate in Charlesfund.com.">
                Birth Date:</label>
            <input class="datePicker" data-val="true" data-val-required="The Birth Date field is required."
                id="BirthDate" name="BirthDate" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="BirthDate" data-valmsg-replace="true">
            </span>
        </div>
    </div>
    <div class="wizardPage" id="page_2">
        Page 2<br />
        blah bla blah
    </div>
    <div id="pageNavigator">
        <a class="navButton" id="btnFirst">&lt;&lt; First</a> <a class="navButton" id="btnPrevious">
            &lt; Previous</a> <a class="navButton" id="btnFinish">Last &gt;&gt;</a> <a class="navButton"
                id="btnNext">Next &gt;</a>
    </div>
</div>

HTML如下所示：

.wizard 
{
    display:block;
    overflow: hidden;
    padding: 0;
}
.wizardPage
{
    display: block;
    border: 1px solid gray;
    border-radius: 1em; 
    margin-bottom: 1em;
    width: 796px;
}
#btnFirst, #btnPrevious{ float: left; margin-right: 0.5em;}
#btnNext, #btnFinish{float: right; margin-left: 0.5em; }
.wizard .wizardPage, #pageNavigator .navButton
{
    display: none;
}
#pageNavigator{width: 796px;}

<div id="pageContainer" class="wizard">
    <div class="wizardPage" id="page_1">
        <div class="editLine">
            <label for="FirstName">
                First Name:</label>
            <input class="text-box single-line" data-val="true" data-val-length="The field First Name must be a string with a maximum length of 40."
                data-val-length-max="40" data-val-required="The First Name field is required."
                id="FirstName" name="FirstName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="MiddleName">
                Middle Name:</label>
            <input class="text-box single-line" data-val="true" data-val-length="The field Middle Name must be a string with a maximum length of 40."
                data-val-length-max="40" data-val-required="The Middle Name field is required."
                id="MiddleName" name="MiddleName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="MiddleName" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="LastName">
                Last Name:</label>
            <input class="text-box single-line" data-val="true" data-val-length="The field Last Name must be a string with a maximum length of 40."
                data-val-length-max="40" data-val-required="The Last Name field is required."
                id="LastName" name="LastName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="State" title="Due to state registration requirements, we are currently accepting investors from select states.">
                State of Residence:</label>
            <select name="State" id="State">
                <option value=""></option>
                <option value="AK" title="Alaska">AK</option>
                <option value="AL" title="Alabama">AL</option>
                <option value="AR" title="Arkansas">AR</option>
                <option value="AZ" title="Arizona">AZ</option>
                <option value="CA" title="California">CA</option>
                <option value="CO" title="Colorado">CO</option>
                <option value="CT" title="Connecticut">CT</option>
                <option value="DC" title="District of Columbia">DC</option>
                <option value="DE" title="Delaware">DE</option>
                <option value="FL" title="Florida">FL</option>
                <option value="GA" title="Georgia">GA</option>
                <option value="HI" title="Hawaii">HI</option>
                <option value="IA" title="Iowa">IA</option>
                <option value="ID" title="Idaho">ID</option>
                <option value="IL" title="Illinois">IL</option>
                <option value="IN" title="Indiana">IN</option>
                <option value="KS" title="Kansas">KS</option>
                <option value="KY" title="Kentucky">KY</option>
                <option value="LA" title="Louisiana">LA</option>
                <option value="MA" title="Massachusetts">MA</option>
                <option value="MD" title="Maryland">MD</option>
                <option value="ME" title="Maine">ME</option>
                <option value="MI" title="Michigan">MI</option>
                <option value="MN" title="Minnesota">MN</option>
                <option value="MO" title="Missouri">MO</option>
                <option value="MS" title="Mississippi">MS</option>
                <option value="MT" title="Montana">MT</option>
                <option value="NC" title="North Carolina">NC</option>
                <option value="ND" title="North Dakota">ND</option>
                <option value="NE" title="Nebraska">NE</option>
                <option value="NH" title="New Hampshire">NH</option>
                <option value="NJ" title="New Jersey">NJ</option>
                <option value="NM" title="New Mexico">NM</option>
                <option value="NV" title="Nevada">NV</option>
                <option value="NY" title="New York">NY</option>
                <option value="OH" title="Ohio">OH</option>
                <option value="OK" title="Oklahoma">OK</option>
                <option value="OR" title="Oregon">OR</option>
                <option value="PA" title="Pennsylvania">PA</option>
                <option value="RI" title="Rhode Island">RI</option>
                <option value="SC" title="South Carolina">SC</option>
                <option value="SD" title="South Dakota">SD</option>
                <option value="TN" title="Tennessee">TN</option>
                <option value="TX" title="Texas">TX</option>
                <option value="UT" title="Utah">UT</option>
                <option value="VA" title="Virginia">VA</option>
                <option value="VT" title="Vermont">VT</option>
                <option value="WA" title="Washington">WA</option>
                <option value="WI" title="Wisconsin">WI</option>
                <option value="WV" title="West Virginia">WV</option>
                <option value="WY" title="Wyoming">WY</option>
            </select>
            <span class="field-validation-valid" data-valmsg-for="State" data-valmsg-replace="true">
            </span>
        </div>
        <div class="editLine">
            <label for="BirthDate" title="You must be at least 18 years old to participate in Charlesfund.com.">
                Birth Date:</label>
            <input class="datePicker" data-val="true" data-val-required="The Birth Date field is required."
                id="BirthDate" name="BirthDate" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="BirthDate" data-valmsg-replace="true">
            </span>
        </div>
    </div>
    <div class="wizardPage" id="page_2">
        Page 2<br />
        blah bla blah
    </div>
    <div id="pageNavigator">
        <a class="navButton" id="btnFirst">&lt;&lt; First</a> <a class="navButton" id="btnPrevious">
            &lt; Previous</a> <a class="navButton" id="btnFinish">Last &gt;&gt;</a> <a class="navButton"
                id="btnNext">Next &gt;</a>
    </div>
</div>

名字：
中名：
姓氏：
居住国：
AK
艾尔
应收账
阿兹
加利福尼亚州
一氧化碳
计算机断层扫描
直流
判定元件
佛罗里达州
GA
你好
IA
身份证件
白细胞介素
在里面
KS
基尼
洛杉矶
文科硕士
医学博士
我
医疗保险
锰
卫生官员
太太
机器翻译
数控
钕
氖
全日空航空公司
新泽西州
纳米
内华达州
纽约
哦
好啊
或
帕
RI
联合国安全理事会
SD
总氮
德克萨斯州
美国犹他州
弗吉尼亚州
及物动词
华盛顿州
WI
WV
WY
出生日期：
第2页

废话废话
弗斯特
上下

---

有人能告诉我我做错了什么吗？我应该提到，div在

ready（）

函数中是可见的。

如果不想将对象的位置更改为绝对位置，可以尝试使用左边距

$('body').on('click','#btnNext', function () {
    $('#page_1').animate(
        {
             'margin-left': '-125%'
        },
        200
    );
});​

---

指定

125%

是什么意思<代码>125%什么？不是合适的问题标题。它应该总结您的问题。您正在尝试使用

left

值设置为

position:absolute

的对象是否具有动画效果？如果没有，则

顶部

、

底部

、

右侧

和

左侧

将不起任何作用。是否尝试使用滑块？？我们可以预览一下吗？我可以帮你做得更好。我正在尝试从页面上滚动这个div，这样我就可以从右侧滚动另一个div。