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.


    CSS Howto..

    how to bring two blocks closer

    How to remove hover effect from a column of a table

    How to Center CSS Tabs

    How does the Meebo bar work so well cross-browser?

    How to enlarge and shrink an element in a loop animation through jquery or CSS

    how to position an element on top of another element?

    How to detect single letters and modify their look/css

    CSS/HTML How to align these elements for a mobile view?

    CSS: how to set width to children's width?

    How to randomly pick colors and shapes from a for loop and display it in another div?

    How to fade in and out a CSS “:after” pseudo element when adding or removing a class

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    How to fill page width of tables with css

    How to keep an element :active even after clicking

    How to create a header that changes as you scroll down the page? [duplicate]

    How to make no borders in a td rowspan rows

    How to fill parent element background color with CSS?

    How to change the active color of the tabs title background using css

    How do I display epub format book in pure HTML5/CSS/Jquery

    How to use CSS hover inside html-tag?

    How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?

    How to style a tag for current div with css?

    how to change the position of these links within div header

    How to apply text rotation in CSS?

    How to make text on the same line different font without using extra divs?

    How to make all Contact 7 Fields the same size?

    does anyone know how to do this css transition? [closed]

    How to use Javascript to check and load CSS if not loaded?

    how to set width of piechart in dc.js through css

    How can I instantly stop a CSS animation on hover?