jQuery ScrollTo Ajax doesn't slide

Question

I'm trying to load a page via ajax and then slide that content horizontally across the screen using the jQuery Scroll library.

On clicking a link, all other currently loaded pages are hidden in the DOM, the next page is loaded via ajax, and scrollTo is called to slide across to the new page.

This all works great if the user is clicking from left to right (i.e. the content is loaded into the DOM below the previous page). However, if a user clicks on a link from right to left (i.e. loading the page above the current page in the DOM so that the page slides in reverse) it doesn't slide but jumps directly to that page.

I'm a little stumped as to why this slide works in one direction, but not another. If I preload all pages in the DOM, it works fine so I'm assuming it's related to how ScrollTo is calculating the widths / distances to the next page.

Answer 1

I resolved this in the end by creating a couple of placeholder divs (left & right) with the content loaded in via AJAX and animated according to its page position in the menu. It was unrealistic to keep each page loaded in the DOM anyway due to bloat.