スライドアニメーションの作成方法は？

Question

CSSの一部

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> 

が実行されている映像は、バックグラウンドであり、私は左に画面の外に右からログインボックスのスライスを作りたいと、ユーザーがボタンをクリックしたときにそれが出て右へスライド画面とアコーディオンのメニューが画面の左から右にスライドします。私はログインボックスとアコーディオンの右の位置（右画面の中央に配置）とスライディングアニメーション効果を作るためにJqueryを実装する方法を持っているCSSのだろうか。

Answer 1

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"); 
});​​ 

ホープこれはあなたを助けます。

Answer 2

jQueryは要素を下から上へ、またはその逆にスライドさせるための.slideDown & .slideUp関数を提供しますが、ltrまたはrtlをスライドさせる要素は提供しません。

しかし、thisは、最小限のコードで行う方法について説明する短いチュートリアルです。