既然动画就让它动得平滑一点

　　继《CSS打造超炫进度条、柱状图》 和《 让图片"跳"起来》之后，这篇随笔将整合上两篇遗留的一些问题。首先是满足第一篇中的“使柱状图或进度条动起来”，然后再是解决第二篇中JS牛人 cloudgamer提出的一点建议，接下来详细说明一下今天的动画。

　　 先来用一个例子来说明问题：（请用鼠标滑过下面的柱状图）

• 
  
• 
  
• 
  
• 
  
• 
  

 

　　上图中的图片还是《CSS打造超炫进度条、柱状图》中的图片，起初想直接用背景做了，发现效果确实不如图片好，于是又换成了图片。如果您对自己的配色能力有信心，可以用背景试试。这里提供一个在线配色的网站http://kuler.adobe.com/有兴趣的朋友可以去看看。

　　题外话说完进入正题。看了上面的示例或许您已经发现了问题所在（如果您没有发现请用鼠标快速滑过柱状图），呵呵。是不是鼠标停止了滑动，但是那些柱子还在不停的继续您刚才的动作。看看代码是怎样的？

 $("#demo1 ul li").hover(

                        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"  });

                    });

　　鼠标停止随即柱子也停止了跳动，但是又有新问题了，是不是这个柱状图真有点反应迟钝了？

 　  我们这样当然不能就此罢休，继续修改看下面示例

 　　（看效果？鼠标快速滑过柱状图）

　　我晕，这个图又有点反应太快了，看代码

                $("#demo3 ul li").hover(function(){

                    $(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();

                        });

                    });

　　不知道你还有没有更好的方法，欢迎分享！

如果随笔中的示例不够流畅，请下载平滑动画示例.rar