jquery-based timeline mouse hover animation plugin

Before to share a lot of jquery plugin, this time we want to share a less common jquery plug-in, it is a timeline, each point on the timeline can display the description of the point when the mouse is out of date, and the mouse is out of date can produce a certain animation effects, For example, the animation of the circle when the mouse.

Online preview Source Download

The implemented code.

HTML code:

 <Divclass= "Clearfix course_nr">        <ulclass= "COURSE_NR2">            <Li>1993<Divclass= "Shiji">                    <H1>1993</H1>                    <P>Content Description 1. </P>                </Div>            </Li>            <Li>1999<Divclass= "Shiji">                    <H1>1999</H1>                    <P>content description 2;</P>                </Div>            </Li>            <Li>2003<Divclass= "Shiji">                    <H1>2003</H1>                    <P>Content Description 3</P>                </Div>            </Li>            <Li> -<Divclass= "Shiji">                    <H1> -</H1>                    <P>Content Description 4</P>                </Div>            </Li>            <Li> -<Divclass= "Shiji">                    <H1> -</H1>                    <P>Content Description 5</P>                </Div>            </Li>            <Li> the<Divclass= "Shiji">                    <H1> the</H1>                    <P>Content Description 6</P>                </Div>            </Li>            <Li> -<Divclass= "Shiji">                    <H1> -</H1>                    <P>Content Description 7</P>                </Div>            </Li>            <Li> the<Divclass= "Shiji">                    <H1> the</H1>                    <P>Content Description 7</P>                </Div>            </Li>        </ul>    </Div>

jquery Code:

$ (function  () {            /// Home Chronicle            $ ('. Course_nr2 li '). Hover (function () {                $ (this). Find ('. Shiji '). Slidedown (+);              function () {                $ (this). Find ('. Shiji '). Slideup (+);            })         ;

via:http://www.w2bc.com/article/13473

jquery-based timeline mouse hover animation plugin