You can also try to use animate which is part of jquery core. Look up some examples on the jquery website, there are quite simple.
-Anoop On 8/29/09, Charlie <charlie...@gmail.com> wrote: > there are lots of plugins to do this > > look for carousel or scroll in a plugin search > > jCarousel and scrollable are 2 excellent ones that come to mind as well as > scrollto > > W. Young wrote: >> >> A good example of the behavior I want is on the firefox addons home >> page https://addons.mozilla.org/en-US/firefox/?application=firefox >> >> At the top, there is a pane for viewing the content of three items at >> a time with a back and forward button to scroll through. >> I need a similar way to slide one item at a time. >> >> On Aug 26, 10:16 am, "W. Young" <wayland.yo...@docupak.com> wrote: >> >>> >>> I have a container div with two inner divs. I have one inner div >>> visible taking up 100% of the visible area and another hidden div. I >>> want the visible div to slide to the left while simultaneously sliding >>> the other div in from the right. This works fine except that while >>> the right div is sliding in, it appears below the left div. >>> >>> How can this be done? >>> >>> Here is the code: >>> >>> <script type="text/javascript" src="js/jQuery/jquery.js"></script> >>> <script type="text/javascript" src="js/jQuery/effects.core.js"></ >>> script> >>> <script type="text/javascript" src="js/jQuery/effects.slide.js"></ >>> script> >>> >>> <script type="text/javascript"> >>> $(document).ready(function() { >>> $("#slide").click(function() { >>> $("#leftDiv").hide('slide', { direction: 'left' >>> }, 1000); >>> $("#rightDiv").show('slide', { direction: 'right' >>> }, 1000); >>> return false; >>> }); >>> }); >>> </script> >>> >>> <div id="container" style="height: 100px; "> >>> <div id="leftDiv" style="float: left; border: solid 1px black; >>> height: 100px; width: 100%;"> >>> <span>some text to slide out left</span> >>> </div> >>> <div id="rightDiv" style="float: left; display: none; border: >>> solid >>> 1px black; height: 100px; width: 100%;"> >>> <span>some text to slide in right</span> >>> </div> >>> </div> >>> <div style="clear: both; height: 100px;"> >>> <input id="slide" type="button" value="Slide" /> >>> </div> >>> >> >> > > > -- Thanks, Anoop
