JQuery UI 显示 ('slide' ，{direction : right}, 500) 不滑动，仅显示

Question

这个问题已经有答案了:

JQuery UI show/slide not working correctly (3 个回答)

已关闭 10 年前。

试图最终让这个婴儿上床 sleep ...(有关上下文/之前的尝试和讨论，请参阅 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); 


}

Answer 1

您想使用“效果”而不是“隐藏”

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

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