I have a wizard I’m trying to build and the animation just isn’t working.
jQuery('#btnNext').on('click', function () {
jQuery('#page_' + currentPage).animate(
{
left: '-125%'
},
200
);
});
In my chrome debugger, the left element gets applied, but the div doesn’t move at all. my CSS looks like this:
.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;}
and the HTML looks like this:
<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>
Can someone tell me what I am doing wrong? I should mention that the divs are made visible in the ready() function.
If you don’t want to change the position of the object to absolute you can try to play with margin-left instead.