试图最终让这个婴儿上床睡觉......(有关上下文/先前的尝试和讨论,请参见此处和此处)
我试图通过向左/向右滑动来隐藏一个元素,并通过从左侧或右侧滑入来显示一个元素:
$(oldBox).hide('slide',{direction:'right'},500);
$(newBox).show('slide',{direction:'right'},500);
实际发生的是旧元素隐藏不滑动,新元素显示不滑动。
HTML 的相关部分(相同的代码重复多次,只是 id 和名称发生了变化):
<div class="x" id="waistBox">
<div class="measureCol measureColLeft">
<span class="measureHeader">Waist</span>
<div class="measureDescription">
Surround your waist with the tape measure at the height
you are most comfortable wearing your pants. Adjust the
tape measure to your desired snugness, as your purchase
waist will match this measurement exactly (e.g. 34.75
inches).
</div>
<div class="measureValue">
<input type="text" name="waist" value = "1" id="waistInput" class="editMeasureInfo"/>
<i>inches</i>
</div>
</div>
<div class="measureCol measureColRight">
<div class="measureVideoContainer">
<img src="../../images/Measure_Video.PNG" class="measureVideo" />
</div>
</div>
</div>
jQuery函数:
function change_measurement_display(oldDisp, newDisp) {
var oldBox = '#' + oldDisp + 'Box';
var newBox = '#' + newDisp + 'Box';
$(oldBox).hide('slide', {
direction : 'right'
}, 500);
$(newBox).show('slide', {
direction : 'right'
}, 500);
}