基于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:http://www.w2bc.com/Article/13473