JQuery UI显示('slide',{direction:right},500)没有滑动,只是显示

Question

试着最终把这个孩子放到床上......(见这里和这里的背景/以前的尝试和讨论)

我试图通过向左/向右滑动来隐藏元素,并通过向左或向右滑动来显示元素:

$(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); 


}

Answer 1

你想用'效果'而不是'隐藏'

$(oldBox).effect('slide',{direction:'right',mode:'show'},500);

$(newBox).effect('slide',{direction:'right',mode:'hide'},500);