JQuery UI show('slide', {direction: right}, 500) not sliding, just showing [duplicate]

Question

Trying to finally put this baby to bed... (see here and here for 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):

<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:

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

You want to use 'effect' instead of 'hide'

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

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