jQuery animate()，鼠标移入执行动画---div有两个子级，鼠标移入div，动画为什么执行多次？求指导

Question

<ul>     <li class="one"><a href="">文字一</a></li>     <li class="two"><a href="">文字二</a></li> </ul>*{     list-style: none;     margin: 0;     padding: 0;     text-decoration: none;     color: #333333; } ul{     width: 200px;     height: 20px;     background-color: #e0e0e0;     margin-top: 100px; } .one{     font-size: 20px;     text-align: center;     line-height: 20px;     float: left; } .two{     font-size: 20px;     text-align: center;     line-height: 20px;     float: left;     margin-left: 40px; }<script src="../js/jquery-1.11.0.min.js"></script> $(document).ready(function () {         $("ul").mouseover(function () {             $(this).animate({marginLeft:"15px"});         });         $("ul").mouseout(function () {             $(this).animate({marginLeft:"0"});         });     }); </script>怎让让鼠标移入ul，执行一次动画，直到鼠标移出ul后，执行过的动画回到原来位置？求指导！

Answer 1

mouseover进入子元素会冒泡到父元素，然后就会重复触发。

使用mouseenter代替、

Answer 2

$("ul").mouseover(function () {
       $(this).animate({marginLeft:"15px"}).animate({marginLeft:"-15px"});//此处修改
 });
 去掉
 $("ul").mouseout(function () {
            $(this).animate({marginLeft:"0"});
        });