JQuery UI show('slide', {direction: right}, 500) 不滑动，只显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16504219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI show('slide', {direction: right}, 500) not sliding, just showing
提问by General_Twyckenham
Trying to finally put this baby to bed... (see hereand herefor context/previous attempts and discussion)
试图最终让这个婴儿上床睡觉......（请参阅此处和此处了解上下文/以前的尝试和讨论）
I am trying to hide an element by sliding it to the left/right, and show an element by sliding in from the left or right:
我试图通过向左/向右滑动来隐藏元素，并通过从左或向右滑动来显示元素：
$(oldBox).hide('slide',{direction:'right'},500);
$(newBox).show('slide',{direction:'right'},500);
What actually happens is that the old element hides without sliding, and the new element shows without sliding.
实际发生的情况是旧元素隐藏而不滑动，而新元素显示而不滑动。
Relevant section(s) of HTML (the same code repeats several times, just has changes in id's and names):
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:
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);
}
回答by carsol
You want to use 'effect' instead of 'hide'
您想使用“效果”而不是“隐藏”
$(oldBox).effect('slide', { direction: 'right', mode: 'show' }, 500);
$(newBox).effect('slide', { direction: 'right', mode: 'hide' }, 500);
$(oldBox).effect('slide', { direction: 'right', mode: 'show' }, 500);
$(newBox).effect('slide', { direction: 'right', mode: 'hide' }, 500);
