jQuery - 類似於Coda的內容滑動

Question

我需要達到這樣的效果：當用戶在標籤上觸發懸停時，屏幕上的當前內容會滑出，並且新內容會滑入（取決於懸停的內容） 。這是我的HTML：

<div class="services-image" style="background:url('/sites/default/files/services-background.jpg') top left no-repeat"> 
<ul> 
<li><a href="#" id="box-1" rel="nofollow">Secure Mobile Computing</a></li> 
<li><a href="#" id="box-2" rel="nofollow">IT<br />Consulting</a></li> 
<li><a href="#" id="box-3" rel="nofollow">Software<br />Engineering</a></li> 
<li><a href="#" id="box-4" rel="nofollow">Microsoft<br />Services</a></li> 
<li><a href="#" id="box-5" rel="nofollow">Cyber<br />Security</a></li> 
<li><a href="#" id="box-6" rel="nofollow">Infrastructure &amp; System<br />Adminstration</a></li> 
</ul> 
</div> 
</div> 

所以，當用戶觸發＃箱2懸停，便於下面的div /與新的內容。例如容器標記：

<div class="content-slides"> 
    <div class="slide-1">text</div> 
    <div class="slide-2">text</div> 
    <div class="slide-3">text</div> 
    <div class="slide-4">text</div> 
    <div class="slide-5">text</div> 
    <div class="slide-6">text</div> 
</div> 

Answer 1

我記得看到這個教程 - 它的目的是設計師，所以你應該通過它:)飛

http://jqueryfordesigners.com/coda-slider-effect/

應該是很容易改變click事件mouseover。