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

浏览数：33 / 时间：2015年06月09日

之前为大家分享了很多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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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