试着最终把这个孩子放到床上......(参见here和here了解背景/之前的尝试和讨论)
我试图通过向左/向右滑动来隐藏元素,并通过向左或向右滑动来显示元素:
$(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);
}
答案 0 :(得分:11)
您想使用'效果'代替'隐藏'
$(oldBox).effect('slide',{direction:'right',mode:'show'},500);
$(newBox).effect('slide',{direction:'right',mode:'hide'},500);