基于jQuery的时间轴鼠标悬停动画插件

之前为大家分享了很多jquery插件，这次我们要来分享一款不太常见的jQuery插件，它是一个时间轴，时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息，并且鼠标滑过时都可以产生一定的动画特效，比如鼠标划过时圆圈的展开动画。



在线预览 源码下载

实现的代码。

html代码：

<div class="clearfix course_nr">
<ul class="course_nr2">
<li>1993
<div class="shiji">
<h1>
1993</h1>
<p>
内容描述1。</p>
</div>
</li>
<li>1999
<div class="shiji">
<h1>
1999</h1>
<p>
内容描述2；</p>
</div>
</li>
<li>2003
<div class="shiji">
<h1>
2003</h1>
<p>
内容描述3</p>
</div>
</li>
<li>2007
<div class="shiji">
<h1>
2007</h1>
<p>
内容描述4</p>
</div>
</li>
<li>2008
<div class="shiji">
<h1>
2008</h1>
<p>
内容描述5</p>
</div>
</li>
<li>2009
<div class="shiji">
<h1>
2009</h1>
<p>
内容描述6</p>
</div>
</li>
<li>2013
<div class="shiji">
<h1>
2013</h1>
<p>
内容描述7</p>
</div>
</li>
<li>2014
<div class="shiji">
<h1>
2014</h1>
<p>
内容描述7</p>
</div>
</li>
</ul>
</div>

jquery代码：

$(function () {

//首页大事记
$('.course_nr2 li').hover(function () {
$(this).find('.shiji').slideDown(600);
}, function () {
$(this).find('.shiji').slideUp(400);
});

});

via:/article/1211482.html