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。