我有一个我正在尝试构建的向导，但动画无效。
jQuery('#btnNext').on('click', function () {
jQuery('#page_' + currentPage).animate(
{
left: '-125%'
},
200
);
});
在我的chrome调试器中，左侧元素被应用，但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;}
，HTML看起来像这样：
<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"><< First</a> <a class="navButton" id="btnPrevious">
< Previous</a> <a class="navButton" id="btnFinish">Last >></a> <a class="navButton"
id="btnNext">Next ></a>
</div>
</div>
有人能告诉我我做错了什么吗？我应该提一下，在ready()函数中可以看到div。
答案 0 :(得分：1)
如果您不想将对象的位置更改为绝对，则可以尝试使用margin-left进行游戏。
$('body').on('click','#btnNext', function () {
$('#page_1').animate(
{
'margin-left': '-125%'
},
200
);
});