當鼠標移動時，jQuery懸停滑塊再次啓動

我想將圖像放在我的網站上，當您將鼠標懸停在它上面時，圖像滑落並顯示它後面的文本。當鼠標移動時，jQuery懸停滑塊再次啓動

我已經得到了這個工作，但是如果我在圖像上稍微移動鼠標，它會再次移動。

這裏是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

來源

2012-09-20 Ollie2619

貓你UNE小提琴，所以我們可以看到它是如何與HTML – Stphane

我已經添加了的jsfiddle工作：） – Ollie2619

添加我的答案，與小提琴呢！ :) – Stphane

您應該使用委派MODELE ...

$(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-

來源

2012-09-20 20:46:20 Stphane

這種方式，你可以得到更準確的你想達到什麼... – Stphane

嘗試增加.stop(true,true)：

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

來源

2012-09-20 20:22:26 j08691

這個dosn't工作，我很害怕:( – Ollie2619

你可以創建一個jsFiddle顯示問題？ – j08691

的問題是，你是移動圖像，以便有一個mouseout事件，這將導致懸停接近函數的調用。你想要做的是使用單獨的像mouseover/mouseout事件，以便：

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

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

看我這裏的解決方案：http://jsfiddle.net/zRn5w/

這種解決方案的唯一的問題是，如果你上下移動鼠標到圖像，因爲mouseout事件在.hover上被調用，所以它瞬間滑回。這將是一個稍微棘手的問題來解決......我可能會擴大.hover的高度，同時我正在移動圖像，以便mouseout區域將是正確的。

來源

2012-09-20 20:39:05

當鼠標移動時，jQuery懸停滑塊再次啓動

回答

相關問題