JQuery的图片动态问题

<table id="tblImgs">
  <tr>
    <td><img src="images/s1.jpg" style="width:150px; height:100px;" /></td>
    <td><img src="images/s2.jpg" style="width:150px; height:100px;" /></td>
    <td><img src="images/s3.jpg" style="width:150px; height:100px;" /></td>
    <td><img src="images/s4.jpg" style="width:150px; height:100px;" /></td>
  </tr>
</table><script type="text/javascript">
$(function(){
$("#tblImgs img").mouseenter(function(){
//alert("ddd");
$(this).animate({"width":"300","height":"200"},"slow");
$("#tblImgs img").not($(this)).animate({"width":"150","height":"100"},"slow");
});
});
 
</script>
如果在两张图片间来回的移动，当鼠标离开时，它还在执行刚才的移动事件。希望移开之后不会再变大了（不会再动）。

解决方案 »

  1.   

    <body>
    <table id="tblImgs">
      <tr>
      <td><img src="img/22.jpg" style="width:150px; height:100px;" /></td>
      <td><img src="img/11.jpg" style="width:150px; height:100px;" /></td>
      <td><img src="img/33.gif" style="width:150px; height:100px;" /></td>
      <td><img src="img/44.jpg" style="width:150px; height:100px;" /></td>
      </tr>
    </table><script type="text/javascript">
    $(function(){
    $("#tblImgs img").hover(function(){
    $(this).animate({"width":"300","height":"200"},"slow");$("#tblImgs img").not($(this)).stop();$("#tblImgs img").not($(this)).css({"width":"150","height":"100"});},function(){$(this).animate({"width":"150","height":"100"},"slow");});
    });
    </script>