关于jquery 怎样让 animate不多次执行呢

提供一段w3c里面的教程
http://www.w3school.com.cn/tiy/t.asp?f=jquery_animation
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  });
});
</script>
</head>

<body><p><a href="#" id="start">Start Animation</a></p><div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>

</body>
</html>大家可以先打开看一下，当点击Start Animation一次的时候有有一个动画出现。当你快速点击5次的时候，这个动画就会显示5次，请问如果避免这种情况呢。因为我要做一个类似 www.yilunet.com 首页这个滑动的效果。我的站上面当鼠标在三个图上面滑动多次后页面就不听的动，请高手指点如何才能做到类似www.yilunet.com这个的华东效果

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

给单击事件做个判断，$("#button").click(function() {
    if(!$("#div:animate")) {
        $("#div").animate();
    }
} #button,就是你的按钮，#div是你想让他运动的元素，：animate是jquery选择器中选择正在运动的元素，具体参加jquery api，如果#div正在执行动画的话，那就什么都不做，如果没有在执行动画的话，那就执行你指定的动画
<html>
<head><script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#start").click(function(){
     $("#box").animate({height:300,queue:true},"slow");
  $("#box").animate({width:300,queue:true},"slow");
  $("#box").animate({height:100,queue:true},"slow");
  $("#box").animate({width:100,queue:true},"slow");
  });
});
</script>
</head>

<body><p><a href="#" id="start">Start Animation</a></p><div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Image Menu Example</title>
<link href="jimgMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<style type="text/css">
body {
margin:0;
padding:0;
color: #333;
font: normal 0.6em sans-serif,Arial;
background-color: #EDEDED;
background-image: url(images/bg1.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top;
width: 100%;
overflow: hidden;
}
</style>
<style type="text/css">
.description {padding-left: 40px;}
h1 {
padding-left: 10px;
font: normal 18px Georgia, "Times New Roman", Times, serif;
}
</style>

<script type="text/javascript">
$(document).ready(function () {  // find the elements to be eased and hook the hover event
  $('div.jimgMenu ul li a').hover(function() {

    // if the element is currently being animated (to a easeOut)...
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
    } else {
      // ease out slowly
      $(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
    }
  });
});
</script>
</head>
<body>
<h1>Jquery Image Menu</h1>
<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#nogo">Landscapes</a></li>
    <li class="people"><a href="#nogo">People</a></li>
    <li class="nature"><a href="#nogo">Nature</a></li>
    <li class="abstract"><a href="#nogo">Abstract</a></li>
    <li class="urban"><a href="#nogo">Urban</a></li>
  </ul>
</div>
<br  style="clear:both"/><br />
<div class="description">
<p>A dynamic Menu allowing you to easily navigate any content visually, with a Mootools like effect through the power of Jquery javascript.</p>
</div>
<hr style="width:92%;text-align:center;height:1px;border:1px;color:#e2e2e2;background-color:#e2e2e2;" />
</body>
</html>
是要得到这样的效果吗？
抱歉代码有问题。。正在调试Ing
这样修改即可：
<script type="text/javascript">
$(document).ready(function(){
    $("#start").click(function(){
        if($("#box:animated").length==0)
        {
            $("#box").animate({height:300},"slow");
            $("#box").animate({width:300},"slow");
            $("#box").animate({height:100},"slow");
            $("#box").animate({width:100},"slow");
        }
    });
});
</script>