jquery - 如何制作幻灯片动画？

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>

有视频在后台运行，我想让登录框从屏幕右侧向左切片，当用户单击按钮时，它会滑到屏幕右侧， Accordion 菜单从屏幕右侧滑到左侧。我想知道登录框和 Accordion 的css有正确的位置(定位在右屏幕中间)以及如何实现Jquery来制作滑动动画效果。

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

希望对你有帮助。