I tried animate before I found the slide effect and obviously it isn't quite that simple if the slide effect won't work.
On Aug 29, 7:56 am, Anoop kumar V <anoopkum...@gmail.com> wrote: > 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 > >> pagehttps://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
