Javascript jquery使用animate上下滑动不会停止滑动

我有一张照片，上面有一些内容（名称、描述、价格），内容是ul的。在默认状态下，ul仅通过设置ul朝向图像底部的绝对位置来显示名称，然后使用掩码div隐藏溢出。然后，当您将鼠标悬停在ul上时，只要您停留在图像上，ul就会向上滑动显示整个信息。鼠标移出时，它会滑回初始位置，只显示标题。。。这就是它的工作原理。现在，当你将鼠标悬停时，它会上下滑动，永远上下滑动

下面是html和样式

div.banner_product {
    float: left; width:  236px; position:  relative; overflow: visible;
}
div.banner_product ul {
    width:  220px;
    background-color: black;
    font-size: 16px;
    color:  white;
    list-style-type: none;
    position: absolute; top:  230px;

    margin: 8px;
    filter: alpha(opacity=70); /* internet explorer */
        -khtml-opacity: 0.7;      /* khtml, old safari */
        -moz-opacity: 0.7;       /* mozilla, netscape */
        opacity: 0.7;           /* fx, safari, opera */

}
.mask {
position: absolute;
top: 0;
overflow: hidden;
height:  300px;
width:  235px;
}


/*html*/
<div class="banner_product" id="pi1"><img src="image1.jpg" alt="" border="0" height="306" width="235" /><div class="mask">
        <ul id="bd1">
            <li class="name-b"><a href="#">PRODUCT NAME</a></li>
            <li class="text-b">DESCRIPTION</li>
            <li class="price-b">PRICE</li>
        </ul></div>
    </div>

我认为每次#bd1穿过鼠标指针（大概是在图像上方悬停）时，它都会调用mouseout，然后在经过时调用mouseover

要测试这一点，请通过指向图像的最底部激活动画，然后立即将鼠标移开

编辑：

嗯。。。对我来说，如果我确保横幅不会越过指针，这会有所帮助，但当然这不是解决办法

一种解决方案似乎是使用jQuery的hover（）方法，而不是特定的鼠标事件：

$('#pi1').hover(
    function (event){
        $('#bd1').animate({"top": "4px"}, 500);
    },

    function (event){
        $('#bd1').animate({"top": "236px"}, 500);
    });

无论如何，它在webkit中工作。我还没有测试IE

var state = true;
    $('#pi1').hover(function(){
        if(state){
            $('#bd1').slideDown('slow',function(){
                state = false;
            });
        }
    },function(){
        if(!state){
            $('#bd1').slideUp('slow',function(){
                state = true;
            });
        }
    }) 

使用jquery slideUp（）和slideDown（）以及悬停事件停止redandent上下移动。。。

---

这实际上可以在使用mouseover和mouseout事件的任何地方使用…

从技术上讲，“绑定”确实有效。只是效果太好了。不过，我不知道为什么“悬停”可以解决这个问题。必须进行某种内部检查，以确保在设置动画或其他内容时不会重复发射。很高兴它对你有用。

var state = true;
    $('#pi1').hover(function(){
        if(state){
            $('#bd1').slideDown('slow',function(){
                state = false;
            });
        }
    },function(){
        if(!state){
            $('#bd1').slideUp('slow',function(){
                state = true;
            });
        }
    })