0

我想在我的网站上放一张图片，当你将鼠标悬停在它上面时，图片会向下滑动并显示其背后的文字。

我已经让它工作了，但是如果我在图像上稍微移动鼠标，它会再次移动。

这是jQuery代码：

$(document).ready(function(){
$('.show').hover(function(){
    $(this).animate({top:'400px'});
},function(){
    $(this).animate({top:'0px'});
    });
});

这是CSS：

.hover {
width: 300px;
height: 400px;
background: black;
margin-top: 10px;
overflow: hidden;
position: relative;
 }

.show {
width: 300px;
height: 400px;
background: red;
position: absolute;
 }

有没有办法让它在悬停状态下停止，直到鼠标完全移出 div？

这是请求的JSFiddle JSFIDDLE

4

3 回答 3

1

尝试添加.stop(true,true)：

$('.show').hover(function() {
    $(this).stop(true,true).animate({
        top: '400px'
    });
}, function() {
    $(this).stop(true,true).animate({
        top: '0px'
    });
});​
于 2012-09-20T20:22:26.080 回答
0

问题是您正在移动图像，因此有一个mouseout事件会导致调用悬停关闭功能。您想要做的是使用单独的mouseover/mouseout事件，如下所示：

$('.show').mouseover( function() {
    $(this).animate( {top: '300px'} );
});

$('.hover').mouseout( function() {
    $('.show').animate( {top: '0px'} );
});

在这里查看我的解决方案：http: //jsfiddle.net/zRn5w/

此解决方案的唯一问题是，如果您将鼠标向下移动到图像上，它会暂时向上滑动，因为mouseout事件被调用 on .hover。这将是一个稍微棘手的问题要解决......我可能会.hover在移动图像的同时扩大高度，以便该mouseout区域是正确的。

​</p>

于 2012-09-20T20:39:05.850 回答
0

您应该使用委托模型...

$(function(){
$('#combo').on('mouseover',function(e){
   var $t = $(e.target);
    if( $t.is('img') ){
       $t.animate({top:'89px'});  
       return false;
    }
}).on('mouseout',function(e){
   var $t = $(e.target), $img = $(this).children('img');
    if( e.target == this && e.relatedTarget != $img.get(0) ){
        $img.clearQueue().animate({top:'10px'});
       return false;        
    }
})
});

小提琴-这里-

于 2012-09-20T20:46:20.607 回答