Javascript slide in slide out div

Question

I'm trying to create a replica of this site:

http://liko0312.wix.com/wildfireimages

I've made it to slide in and out from the same direction using CSS and placing the div outside with 100% and then bringing it in with 0, very much a toggle effect.

However, I'm trying to make the pages slide in and out just like in the model site but CSS does not allow me to. I have good skills with HTML/CSS but am low on Javascript. So far I found this fiddle , but it's a toggle animation while I need it to slide in from the right and slide out to the left and after it has to reset. Also, the animation of the current div sliding out and the next div sliding in have to be in the same time.

Here is Fiddle with code as requested

 .panel{ width:0px; height:0px; overflow: hidden; position:relative; left:100%; background: none; z-index: 2; -moz-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s; -webkit-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s; -o-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s; transition: all .8s ease; transition-delay:0s; margin:0px; } .panel:target{ width:100%; height:auto; margin:0px 0 0; padding:0; background-color: transparent; position:relative; left:0; z-index:3; } 

 <div id="overall-wrap"> <!-- Header with Navigation --> <div id="header"> <a href="#home"><img class="header" src="images/logo.png" width="133" height="86" alt="Wildfire Images"></a> <nav> <ul id="navigation"> <li><a class="scroll" href="#home">Home</a></li> <li><a class="scroll" href="#about">About Us</a> <ul> <li><a class="scroll" href="#contact">Contact Us</a></li> </ul> </li> </ul> </nav> <div class="clearfix"></div> </div> <div class="clearfix"></div> <div id="home" class="panel"></div> <!-- About Us --> <div id="about" class="panel"> <div class="content"> <div class="bg-about effect2"> <div class="about-wrapper"> <div class="about-text"> <h2> About Us</h2> <p>Wildfire Images is a Sydney based boutique Portrait Photography Studio dedicated to candidly capturing all that is beautiful, fun and elegant about you and your loved ones.</p> <p>At Wildfire Images, we tailor every shoot to you, your trade mark smile, your rapturous laugh, your devotion to those you love, the cheeky, the serious and all those gorgeous things in between that will always be unmistakably you.</p> <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p> <p class="strong">Contact us today on 9150 6275.</p> </div> <div class="about-image"><img src="images/aboutme.jpg" width="200" height="300" alt="WildFire Studios"></div> </div> </div> <!-- ... --> </div> <div class="clearfix"></div> </div> <!-- /About Us --> <!-- Contact --> <div id="contact" class="panel"> <div class="content"> <div class="bg-contact effect2"> <img src="images/contact-image.jpg" width="900" height="419" alt="Contact Wildfire"/> <div id="form-wrapper"> <div id="form-outer"> <div id="text-wrap"> <div id="contact-left"> <h2>Contact</h2> <div id="phone"> <h3>Phone</h3><p>9150 6275</p></div> <div id="email"> <h3>Email</h3><p>info@wildfireimages.com.au<p></div> </div> <div id="contact-right"><h3>Address</h3><p>Studio 18,</p><p>442-444 King Georges Rd</p><p>BEVERLY HILLS NSW 2209</p></div> </div> <div class="clear"></div> <div id="form-inner"> <form name="contact" action="contact.php" method="post" onBlur="MM_validateForm('name','','R','email','','RisEmail','subject','','R','message','','R');return document.MM_returnValue"> <input name="name" type="text" class="field" id="name" placeholder="Name"/> <input name="email" type="email" class="field" id="email" placeholder="Email"/> <input name="subject" type="text" class="field" id="subject" placeholder="Subject" /> <textarea name="message" class="field_textarea" id="message" placeholder="Message"></textarea> <input type="submit" value="Send" name="submit" class="submit"/> </form> </div> </div> </div> </div> <!-- ... --> </div> </div> <!-- /Contact --> <!-- Portraits --> <div id="portraits" class="panel"> <div class="content"> <div class="gallery-big effect2"> <div id="gallery-big-text-wrap"> <h2>Portraits</h2> <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p> <p>Contact us today on 9150 6275.</p> </div> <!--k gallery start--> <img src="images/baby-06-portrait-gallery.jpg" width="798" height="531"> <img src="k/ki_galleries/all-about-me/AEP_0486.jpg" width="798" height="1200"> <img src="k/ki_galleries/all-about-me/AEP_0653.jpg" width="798" height="1200"> <img src="k/ki_galleries/all-about-me/DSC_0548.jpg" width="799" height="1200"> <img src="k/ki_galleries/all-about-me/DSC_2652-edit.jpg" width="799" height="1200"> <img src="images/family.jpg" width="798" height="532"> <img src="k/ki_galleries/all-about-me/DSC_4052.jpg" width="799" height="1200"> </div> </div> </div> <!-- /Portraits --> </div> 

Also, the new site can be seen at wixwebsite.seobrasov.com

Please note that the slide in and out should work for more than two divs and be able to jump from tiv 1 to div 3 without showing div 2.

Answer 1

You could try two things-

1. You can use Jquery based plugin like bxslider. You do not need to learn jquery. It's pretty self explanatory if you look carefully. http://bxslider.com/options

2. You can use a pure CSS 3 based solution. This employs transition property of CSS 3 with transformation function like ease-in/ease-out applied to them. See a demo here http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/

Answer 2

You can do this by using two divs: one to handle the page shown, and one to handle the page to be loaded.

When you click a link, simply animate the current page to the left and set it's css to be to the right when the animation is finished:

$("#page1").stop().animate({
    left:"-100%"
}, 500, function(){
    $(this).css("left", "100%");
});

$("#page2").stop().animate({
    left:"10%"
}, 500);

Basic JSFiddle

JSFiddle using 3-page menu

Answer 3

Updated your code a little bit to suport the required navigation

I have added a wrapper around the divs which shows only one box at a time.

<div id="mainbox">
        <div class="left-right">
            <div class="red box">Red Div !</div>
            <div class="green box">Green Div !</div>
        </div>
</div>

The CSS is like this

#mainbox {
    height:200px;
    width:200px;
    overflow:hidden;
}

Then I changed its left positions to -100% on mouse over and reverted to 0 on mouse out.

$(document).ready(function(){
    $('.left-right').mouseover(function(){
         $('.left-right').stop().animate({
            left: '-100%'    
        }, 400);                        
    }).mouseout(function(){
        $('.left-right').stop().animate({
                left:'0'
        }, 400);     
    });

});

Working JSFiddle Demo

Answer 4

Check this update: JS Fiddle updated! ( http://jsfiddle.net/jPneT/2705/ )

• Uses 3 views
• you have a default view
• Easy methods to navigate.

Js file:

$(document).ready(function(){
    var currentPageI = -1;
    var pages = [
        $('div.l1'),
        $('div.l2'),
        $('div.l3'),
    ];
    var viewsWidth = 200; 
    var showPage = function(index){
        if(index === currentPageI){return;}
        var currentPage = pages[currentPageI];
        if(currentPage){
            currentPage.stop().animate({left: -viewsWidth})
        }
        var nextPage = pages[index];
        nextPage
            .stop()
            .css({left: viewsWidth})
            .animate({left: 0}) 
        currentPageI = index;
    }
    // show default page
    showPage(0);
    $('a.l1').click(showPage.bind(null, 0));
    $('a.l2').click(showPage.bind(null, 1));
    $('a.l3').click(showPage.bind(null, 2));

    $('.left-right').mouseover(function(){
        $('.slider').stop().animate({
            right: 0    
        }, 400);                        
    }).mouseout(function(){
        $('.slider').stop().animate({
            right: '-200px'    
        }, 400);     
    });

});

HTML:

<a class="l1">1</a><a class="l2">2</a><a class="l3">3</a>

<div class="left-right">
    <div class="l1">L1 view</div>
    <div class="l2">L2 view</div>
    <div class="l3">L3 view</div>
</div>

CSS:

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
    clear: left;
}
div.l1,div.l2,div.l3 {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    color:#fff;
}
a.l1,a.l2,a.l3 {
    display: block;
    width: 50px;
    height: 50px;
    float: left;
    cursor: pointer;
    opacity: 0.6;
}
a:hover {
    opacity: 1
}

.l1{
    color: red;
    background-color:red;
}
.l2{
    color: green;
    background-color:green;
}
.l3{
    color: blue;
    background-color:blue;
}