移动鼠标时，jQuery Hover Slider 再次启动答案

【问题标题】：jQuery Hover Slider starts again when the mouse is moved移动鼠标时，jQuery Hover Slider 再次启动
【发布时间】：2012-09-21 04:52:18
【问题描述】：

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

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

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

【问题讨论】：

cat you une fiddle so we can see how it works with html
添加了我的答案，还有小提琴！ :)

标签： jquery hover slider

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

$(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;        
    }
})
});

小提琴-HERE-

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：