Code showing the smooth movement of text links between left and right

Of course, it will be great to take some time to change it. I will post the code below:

Html code:

The code is as follows:	Copy code
<Div> <a href = "#1"> Test </a> </div>

Css code:

The code is as follows:	Copy code
. Test a {background-color: #446CB3; color: # ffffff; padding: 10px; text-decoration: none; -Webkit-transition: margin 0.2 s transfer-out; -Moz-transition: margin 0.2 s outgoing-out; -Khtml-transition: margin 0.2 s transfer-out ;} A: hover {margin-left: 10px ;}

Of course, we need to know that css3 animation is not compatible with browsers earlier than ie10, so this effect is not very effective in earlier versions of the IE kernel, but this effect is very simple to implement. We can combine jquery

Of course, we know that css3 animation is not compatible with browsers earlier than ie10, so we can use jq code to implement it. The specific code is:

The code is as follows:	Copy code
$ (Function (){ $ ("A"). hover (function (){ $ (This ). stop (). animate ({"margin-left": "10px", "text-shadow": "2px 2px 10px #333333 & Prime ;}," fast "); }, Function (){ $ (This). stop (). animate ({"margin-left": "0px"}, "fast "); }); });

You may wonder why there is a position: relative in css? In fact, this is another method of writing. The jq code is as follows:

The code is as follows:	Copy code
$ (Function (){ $ ("A"). hover (function (){ $ (This). stop (). animate ({"left": "10px"}, 300 ); }, Function (){ $ (This). stop (). animate ({"left": "0px"}, 300 ); }); });

Is it very simple? It is worth trying.