Better way to make a background slideDown with jQuery?

I am trying to make the background of a webpage slideDown() a different background based on the button pressed. with jquery. Currently I have an absolute positioned background with a lower 开发者_运维问答z-index than everything else, but I was wondering if there was a better way, or if this was the correct approach? Thank you.

I think that an absolute positioned div is great for doing background slideDown. If jquery is already loaded to the page, it's the easiest way to do it. Your approach is fine/

You could use the CSS background-image property (which works with gradients in newer browsers, if you find that useful) to draw the background, and have jQuery animate the background-position property to slide it down.

Here is a live demo of it: http://jsfiddle.net/fD8WJ/ (Firefox-only for the gradient effect, but it will work with any url(...) image). It uses a small jQuery plug-in to address jQuery's lack of support for specifying multiple values for background-position in jQuery.animate(). Otherwise, it's quite snazzy.