文字链接平滑左右移动的效果

浏览数：22 / 时间：2015年06月11日

鼠标移动到文字连接时会出现向右平滑移动。
　　例如：
　　html代码：
　　http://xiong.chexian666.com/
　　<div class="test"><a href="">test link move</a></div>
　　css代码：
　　.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;}
　　具体效果可以参考我写的实例：http://codepen.io/kujian/pen/Iwnsi
　　当然我们知道css3动画不兼容ie10以下浏览器，那么我们可以使用jq代码来实现，具体代码为：
　　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");
　　});
　　});
　　大家可能很疑惑，为什么css里面由一个position:relative呢？其实这是我的另外一种写法，jq代码如下
　　http://xiong.yingyanshop.com/
　　$(function(){
　　$("a").hover(function(){
　　$(this).stop().animate({"left":"10px"},300);
　　},function(){
　　$(this).stop().animate({"left":"0px"},300);
　　});
　　});
　　是不是很简单的效果呢？值得试试。