Jquery Hide - how do I contain effects within div?

[Anti-Moronic]

To explain better, here is the effect I'm trying to use:

 

http://jqueryui.com/demos/hide/#option-options

 

I'm currently messing about with the 'Drop' effect. If you run that effect you will see it slides off to the left, but the effect doesn't show outside of the containing div.

 

Now when I run this effect on a div on my site which has a wrapper, the effect is not contained within the wrapper.

 

Any ideas? It seems pretty simple but I can't get my head around it.

[YourNameHere]

Can we see an example?

[Anti-Moronic]

Yes, the link above is an example. The effect is contained within the 'toggler' div, yet that div doesn't seem to have any special css rules.

 

When you wrap this effect in a div, it still animates outside the div.

 

Thanks,

Damien.

[JustLikeIcarus]

You may be able to specify distance in the options for drop. Currently the code shows drops distance as

var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) / 2 : el.outerWidth({margin:true}) / 2);

 

so  .hide('drop', {distance: <your distance logic>}) may work.