jQuery UI show() effect is not expected

Question

I'm trying to reproduce on show() the same scale effect run on hide(). I'm using the same parameters, but the effect is not the same:

$('.div1').show('scale', {
   direction: "horizontal",
   duration: 1000
});

$('.div2').hide('scale', {
   direction: "horizontal",
   duration: 1000
});

http://jsfiddle.net/AUM6d/305/

Answer 1

You can use the from attribute and achieve what you wanted:

$('.div1').show('scale', {
        direction: "horizontal" ,
        from: { width: "0"}
       },
    1000
);

That way you tell it to start from 0 width and expand from there.

Fiddle

Answer 2

If the effect is acceptable, try this:

$('.div1').show('scale', {
   direction: "both",
   duration: 1000
});

$('.div2').hide('scale', {
   direction: "both",
   duration: 1000
});

JSFiddle: http://jsfiddle.net/AUM6d/307/

It's slightly different, but it works. From my testing (and the jQueryUI demo page) it looks like direction: 'horizontal' is buggy.