how to make slide animation?

Tags: jquery,css

Problem :

css part

 body
{
background-color:black;
padding:0;
margin:0;
overflow:hidden;
}   
  #accordion {
   display:none;
       position:absolute;   
   left:89%;   
       margin-top:400px;
       width:174px;
   height:150px; 
   list-style:none;

  }

 #logpop
{
 display:none;
 position:absolute; 
 left:91%;   
 margin-top:400px;
 width:174px;
 height:150px; 

}


   <!-- login -->
   <div id="logpop">
     <div  class="logpop_box">
     <div class="form">
    <input class="input_box" name="email" type="text" placeholder="aaa"/><br/>
    <input class="input_box" name="pass" type="password" placeholder="*****"/>
            <br/>
    <button id="btn1">Login</button>
          </div>
         </div>
    </div>
 <!-- accordian menu-->
    <ul id="accordion">
<li>
    <a href="#" class="item popular" rel="popular"></a>
    <ul id="inchat" class="list_friends">
    <li class="ch0"><img src="img/49992_720384020_1896998575_q.jpg" /></li>
        <li class="ch1"><img src="img/48983_615523712_8495_q.jpg" /></li>
        <li class="ch2"><img src="img/41621_717814907_4472_q.jpg" /></li>
    </ul>
</li>
<li>
    <a href="#" class="item category" rel="category"></a>
    <ul id="inchannel">
        <li class="icha0"><img  src="img/41403_1434825607_37944358_q.jpg">Jae Jung</li>
        <li class="icha1"><img  src="img/48983_615523712_8495_q.jpg"></li>
        <li class="icha2"><img  src="img/41621_717814907_4472_q.jpg"></li>
    </ul>
</li>

 </ul>

there is video running in the background and I want to make login box slice from right out of screen to left and when user clicks on button it slides to right out of screen and accordion menu slide in right out of screen to left. I wonder css for login box and accordion has right position(positioning on right screen middle) and how to implement Jquery to make sliding animation effect.

---

Solution :

Check this fiddle

HTML

<input id="btnStart" type="button" value="Start" />
<div id="slider">Login</div>
<div id="accordion">
   <h3><a href="#">First header</a></h3>
   <div>First content</div>
   <h3><a href="#">Second header</a></h3>
   <div>Second content</div>
</div>​

CSS

body{
    overflow: hidden;
}
#slider{
    width: 100px;
    background-color: rgb(200,200,200);
    text-align: center;
    position: absolute;
    z-index: 100;
    top: 50px;
    right: -100px;
}
#accordion{
    position: absolute;
    z-index: 100;
    top: 20px;
    left: -100px;
}
input{
    padding: 3px;
}

JavaScript

$("#accordion").accordion();
$("#btnStart").click(function(e) {
    $("#slider").animate({
        "right": "+=" + $(window).width() / 2 + "px"
    }, "1000");
});
$("#slider").click(function(e) {
    $("#slider").animate({
        "right": "-=" + $(window).width() / 2 + "px"
    }, "1000");
    $("#accordion").animate({
        "left": "+=" + $(window).width() / 2 + "px"
    }, "1000");
});​​

Hope this helps you.