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>

因此，当用户触发#box-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应该很容易。