继《CSS打造超炫进度条、柱状图》 和《 让图片"跳"起来》之后，这篇随笔将整合上两篇遗留的一些问题。首先是满足第一篇中的“使柱状图或进度条动起来”，然后再是解决第二篇中JS牛人 cloudgamer提出的一点建议，接下来详细说明一下今天的动画。
先来用一个例子来说明问题：（请用鼠标滑过下面的柱状图）
上图中的图片还是《CSS打造超炫进度条、柱状图》中的图片，起初想直接用背景做了，发现效果确实不如图片好，于是又换成了图片。如果您对自己的配色能力有信心，可以用背景试试。这里提供一个在线配色的网站http://kuler.adobe.com/有兴趣的朋友可以去看看。
题外话说完进入正题。看了上面的示例或许您已经发现了问题所在（如果您没有发现请用鼠标快速滑过柱状图），呵呵。是不是鼠标停止了滑动，但是那些柱子还在不停的继续您刚才的动作。看看代码是怎样的？
$("#demo1 ul li").hover(
function(){$(this).animate({ height: "180px" });},
function() {$(this).animate({ height: "50px" });}
);
function(){$(this).animate({ height: "180px" });},
function() {$(this).animate({ height: "50px" });}
);
哦原来这么简单，当然会出问题了。
再看下面改进后的方案，鼠标离开后柱子马上停止跳动。
（看效果？鼠标快速滑过柱状图）
代码是这样的：
$("#demo2 ul li").hover(function(){
$(this).stop().animate({ height: "180px" });
}, function() {
$(this).stop().animate({ height: "50px" });
});
$(this).stop().animate({ height: "180px" });
}, function() {
$(this).stop().animate({ height: "50px" });
});
鼠标停止随即柱子也停止了跳动，但是又有新问题了，是不是这个柱状图真有点反应迟钝了？
我们这样当然不能就此罢休，继续修改看下面示例
（看效果？鼠标快速滑过柱状图）
我晕，这个图又有点反应太快了，看代码
代码
$("#demo3 ul li").hover(function(){
$(this).stop(true, true).animate({ height: "180px"});
}, function() {
$(this).stop(true, true).animate({ height: "50px"});
});
$(this).stop(true, true).animate({ height: "180px"});
}, function() {
$(this).stop(true, true).animate({ height: "50px"});
});
原来只添加了两个参数，有没有更好一点的方法呢？我们继续往下看
（看效果？鼠标快速滑过柱状图）
是不是这个感觉好多了？看下代码是怎样的：
$("#demo4 ul li").hover(function(){
if (!$(this).hasClass('animated')) {
$(this).dequeue().stop().animate({ height: "180px" });
}
}, function() {
$(this).addClass('animated').animate({ height: "50px" }, "normal", "linear", function() {
$(this).removeClass('animated').dequeue();
});
});
if (!$(this).hasClass('animated')) {
$(this).dequeue().stop().animate({ height: "180px" });
}
}, function() {
$(this).addClass('animated').animate({ height: "50px" }, "normal", "linear", function() {
$(this).removeClass('animated').dequeue();
});
});
不知道你还有没有更好的方法，欢迎分享！
如果随笔中的示例不够流畅，请下载平滑动画示例.rar