to begin with, I am bad with jQuery and coding.

I am attempting to acquire a slide effect like this one but horizontal with jQuery. I'm under Wordpress and I am loading 15 posts at any given time (only thumbnail and title) with ajax whenever a user clicks next_posts_link and former_posts_link. I first got it working utilizing a fade effect however i can't have it using a slide effect as with the web site above.

I acquired something working using jQueryUI, but essentially I'd 2 problems:

  • after i "hide" the very first div, sliding it left, the second reason is being released after a while (I believe is loading time). Let me give more the "push" effect showing the following div arriving as the very first is heading out. Maybe this may be completed with some kind of preloading.

  • I'm able to do that only one way (first div hiding on left side, second div arriving from right side). I want the best direction when i click "next" or "prev" button.

This is actually the JS I am using:

 <script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function(){ 
                    jQuery('#nav-above a').live('click', function(e){e.preventDefault();var link = jQuery(this).attr('href');
                    jQuery('#nav-above').load(link + ' #nav-above');jQuery('#container-home').hide("slide", { direction : "left" }, 200).load(link + ' #content', function(){ jQuery('#container-home').show("slide", { direction: "right" }, 200);
                    }); 
                });
            });
</script>

I guess you'll need something similar to Cycle's scrollRight.

Take a look, if you want any help, just say it.

http://jquery.malsup.com/cycle/