Text link smooth left and right movement effect

When you move the mouse to a text connection, it appears to move smoothly to the right.
For example:
HTML code:
http://xiong.chexian666.com/
<div class= "test" ><a href= "" >test link move</a></div>
CSS code:
. Test A{position:relative;background-color: #446CB3; color: #ffffff; padding:10px; text-decoration:none;
-webkit-transition:margin 0.2s ease-out;
-moz-transition:margin 0.2s ease-out;
-khtml-transition:margin 0.2s ease-out; }
a:hover{margin-left:10px;}
The specific effect can be referred to the example I wrote: Http://codepen.io/kujian/pen/Iwnsi
Of course we know CSS3 animation is incompatible ie10 the following browsers, then we can use the JQ code to implement, the specific code is:
http://xiong.zt-4s.com/
$ (function () {
$ ("a"). Hover (function () {
$ (this). Stop (). Animate ({"Margin-left": "10px", "Text-shadow": "2px 2px 10px #333333"}, "fast");
},function () {
$ (this). Stop (). Animate ({"Margin-left": "0px"}, "fast");
});
});
You may be wondering why CSS is made up of a position:relative? In fact, this is my other way of writing, the JQ code is as follows
http://xiong.yingyanshop.com/
$ (function () {
$ ("a"). Hover (function () {
$ (this). the stop (). Animate ({"Left": "10px"},300);
},function () {
$ (this). the stop (). Animate ({"Left": "0px"},300);
});
});
Isn't it a very simple effect? Worth a try.

Text link smooth left and right movement effect