如何製作幻燈片動畫？

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> 

有視頻在後臺運行，我想從右側使登錄框片了屏幕的左，當按鈕用戶點擊它滑到右出屏幕和手風琴菜單向右滑出屏幕左側。我很想知道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"); 
});​​ 

希望這有助於你。

Answer 2

jQuery提供了.slideDown &.slideUp函數可以將元素從底部移動到頂部，反之亦然，但它不提供滑動ltr或rtl的元素。

但this是一個簡短的教程，涵蓋了如何用最少的代碼來完成它。