javascript - jquery上下滑动动画不会停止滑动

Question

我有一张照片，上面有一些内容(名称、描述、价格)，内容在 ul 中。在默认状态下，ul 仅通过将 ul 的绝对位置设置为朝向图像底部然后使用掩码 div overflow hidden 来显示名称。然后，当您将鼠标悬停在 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>

这是脚本:

$('#pi1')
.bind('mouseover',enterImg)
.bind('mouseout',exitImg)
function enterImg(event){
$('#bd1').animate({"top": "4px"}, 2000);
event.stopPropagation();

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

}

Answer 1

我认为每次 #bd1 越过您的鼠标指针(大概悬停在图像上)时，它都会调用 mouseout，然后在它经过时调用 mouseover。

要对此进行测试，请通过指向图像的最底部来激事件画，然后立即将鼠标移开。

编辑:

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

一个解决方案似乎是使用 jQuery 的 hover() 方法而不是特定的鼠标事件:

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

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

无论如何都可以在 webkit 中工作。还没有测试 IE。