Question

first of all, I’m not good with jQuery and coding.

I’m trying to achieve a slide effect like this one but horizontal with jQuery.
I am under WordPress and I’m loading 15 posts at a time (only thumbnail and title) with ajax when a user clicks on next_posts_link and previous_posts_link. I got it working using a fade effect but i can’t get it working with a slide effect like in the website above.

I got something working using jQueryUI, but basically I had 2 problems:

• when I “hide” the first div, sliding it to the left, the second is coming out after some time (I think is loading time). I’d like to give more the “push” effect showing the next div coming in as the first is going out. Maybe this could be done with some sort of preloading.

• I can do this only in one direction (first div hiding on left side, second div coming in from right side). I need the right direction as I click on “next” or “prev” button.

This is the JS I’m 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>

Answer 1

I suppose you need something like Cycle’s scrollRight.

Check it out, if you need any help, just say it.

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