Site navigation under the title bar there is a small color block following the mouse movement effect

Maybe a lot of people look at the title is not very clear about this effect, the following briefly describe this effect:

See a lot of sites on the navigation bar below a small color block, the beginning of the small color block is under the first title, when the mouse moved to another title, the small color block will leisurely run to the corresponding title below.

You can only see that the color block is moving, but the display is not good for the block is smooth from the bottom of the home to move under product. Anyway, that's what it means. Look at my explanation above to know, no, look at the code below or run a copy of the code to see the effect.

This special effect is very fun, just a friend wrote this aspect of the special effects code, I took it to see the next, it was found in fact is very simple, is a few jquery encapsulation method splicing a bit OK, but their own writing or is very puzzled, in fact, the main idea and thinking of the problem.

Paste the following code:

Attention:

1. Using the jquery library, if you are interested in copy and paste in the past to debug yourself, please import the corresponding jquery library

2. Using the parent () function

3. Using the position () function

4. Using the Stop () function

(This stop function can be overloaded.) Can be a parameter that indicates unconditional stopping of all current animations. One is two parameters, indicating whether to let the current animation finish before stopping the animation)

5. Using the animate () function

(This animate is very popular, suggest everybody go to W3cshool to look at)

6. MouseEnter and MouseLeave functions for mouse-up and removal

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">