Question

我的照片上面有一些内容（名称，desc，价格），内容是ul。在默认状态下，ul只显示名称，方法是将ul的绝对位置设置在图像的底部，然后用掩码div隐藏溢出。然后当你鼠标悬停时，只要你留在图像上，就会向上显示整个信息。鼠标移动时，它会滑回到初始位置，只显示标题......它应该如何工作。现在，当你将鼠标悬停在上面时，它会一直上下滑动。

这里是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。

Answer 2

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向上移动... 这实际上可以在任何鼠标悬停和鼠标输出事件的任何地方使用......

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

2 个答案: