Sliding huge boxes using jQuery ends up with hiding only

On my website I am trying to slide left/ri开发者_C百科ght box away. The box is quite big, because has tons of small pictures and another elements inside. And is downloaded via ajax. The situation with sliding up/down is exactly the same. (so let's work with that, because it's easier to use - without animate or jquery UI).

When I try to slideUp() the element doesn't slide at all but hides. It all takes almost about one second. I tried to put there a simple div of same height and width and I was able to slide that element without any troubles. So my theory is, that the div is simply too big for messing with it like that. Is that possible? Or the problem is somewhere else?

If I am right, don't you have any ideas how to omit that, but make some nice effect?

I think that your answer is there in your question, when you say that you have got it to work successfully with a simple div of the same height etc. It sounds to me that you are asking a lot of the rendering engine, which will have to re-render each of these images, in each incremental position as it slides up off the page.

Javascript engines in the latest browsers are much better than they used to be, but they can only do so much. Combine that with the browser having to render each step of the transition, I am not surprised that it takes so long.

Is the animation really necessary? If so, you could perhaps do it in a number of stages:

• Quickly remove all of the content of the div

• Animate the large div to slide up or shrink to a small one and disappear