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