Anyway to add a slide in effect using jQuery to large photos on the body element?

I have a site that uses large background photos (around 1200px wide) on a site that has a page width of around 1060px. In order to prevent horizontal scrollbars from appearing, I need to load the background photos on the body element. The page contains a carousel and when it transitions, the text inside changes (slides left to right / right to left depending on the button clicked) then once it's complete, the background photo changes.

Is there anyway to use jQuery to slide the background photo in the body element from one side to another? If so, can someone give me an exa开发者_运维知识库mple?

---

You can animate the background image like so...

$('body').animate({ backgroundPosition: "-=900px" }, 3000);

Demo: http://jsfiddle.net/wdm954/eC8vP/

More on animate: http://api.jquery.com/animate/

---

This plugin can probably help you out.