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>
