jQuery: toggle div but height is adjusted at the end of loading

Question

I use this script to toggle a div with jQuery:

$('.toggle').click(function() {
    var $toggled = $(this).attr('href');

$($toggled).siblings('.gallery:visible').hide();
    $($toggled).toggle("slide", {direction: 'up'}, 750);
    return false;
});

The problem is that during the animation, the appearing div is cut at the end. But the proper height is restored at the end of the animation.

Here's the link to the "demo" (the gallery at the bottom, click on a random picture): http://www.rendezvousroma.it/new/privati.php

I don't know what's the problem.. I increased the height of all containers with no luck..

Answer 1

It looks like slide and .ui-effects-wrapper has some issues with elements containing margins. You can try adding css to set an explicit height to the wrapper div:

.ui-effects-wrapper {height:100% !important}