使用jquery制作动感的鼠标滑过效果

效果说明：鼠标滑过图标，图标向上移动，同时，底部的阴影开始变淡，鼠标移开图标，效果复位。

制作过程

<ul id="nav-shadow">
<li><a href="#" title="分享到嘀咕"><img src="images/digu.png" width="64" height="64" /></a></li>
<li><a href="#" title="分享到新浪微博"><img src="images/sinaminiblog.png" width="64" height="64" /></a></li>
<li><a href="#" title="分享到做啥"><img src="images/zuosa.png" width="64" height="64" /></a></li>
<li><a href="#" title="分享到人间"><img src="images/renjian.png" width="64" height="64" /></a></li>
<li><a href="#" title="分享到gbuzz"><img src="images/gbuzz.png" width="64" height="64" /></a></li>
<li><a href="#" title="分享到鲜果"><img src="images/xianguo.png" width="64" height="64" /></a></li>
<li><a href="#" title="分享到9dian"><img src="images/9dian.png" width="64" height="64" /></a></li>
</ul>

非常简单的列表结构。

$(document).ready(function() {
//给每个li添加阴影图片
$("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />');
// 鼠标滑过按钮，动画开始
$("#nav-shadow li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0", opacity: 1 }, 250);
});
});

脚本不复杂，这效果还是很不错的。
效果要领说明：

动画的关键脚本如下：

var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);

记得这里的stop()必不可少哦，不然动画会有bug，关于这个问题可以详见，我以前写的文章：
hoverFlow —终止jquery的animation

blog正缺少分享按钮列表，这几天整成个jquery插件发布出去。