只有當jquery不可見時才滑下來

我有一個使用jquery的簡單問題。我想在菜單標題下顯示詳細信息，但界面並不那麼流暢。嘗試一些東西出來幾個小時後，我回來開始，看看是否有一個簡單的答案只有當jquery不可見時才滑下來

看this例如

兩個問題：

如果您將鼠標懸停在多個類別上以達到您想要的類別，動畫仍然貫穿所有其他動畫，而不是停止其他動畫，只動畫鼠標當前懸停的動畫。
如果您將鼠標懸停在已打開的類別上，它仍會運行動畫，但我只希望在內容不可見的情況下運行動畫。有沒有簡單的if語句可以做到這一點？

2012-03-13 user962642

你得到這個數字出來，你有兩個/三個非常有用的答案？ – Relic 2012-03-13 22:07:23

$('.content').hide(); 
var $elms = $('.fruit, .vegetable, .dairy'); 
$elms.hover(function() { 
    var $content = $(this).next('.content'); 
    $content.stop(1, 1).slideToggle(400); 
});

http://jsfiddle.net/elclanrs/GBkMB/1/

編輯：

爲了防止內容滑回了，你可以嵌套div就像這樣：

<div class="fruit">fruit 
    <div class="content fruit_types">apple<br/>bannana<br/>orange</div> 
</div> 
<div class="vegetable">vegetable 
    <div class="content vegetable_types">celery<br/>lettuce<br/>cucumber</div> 
</div> 
<div class="dairy">dairy 
    <div class="content dairy_types">milk<br/>cheese<br/>butter</div> 
</div>

JQ：

$('.content').hide(); 
var $elms = $('.fruit, .vegetable, .dairy'); 
$elms.hover(function() { 
    var $content = $(this).children('.content'); //<-`children()` not `next()` 
     $content.stop(1,1).slideToggle(400); 

});

例子：http://jsfiddle.net/elclanrs/GBkMB/5/

來源

2012-03-13 21:32:52 elclanrs

一個非常優雅的方式！（我看到你編輯之前有什麼......） – gdoron 2012-03-13 21:35:19

這有一個問題...如果你將鼠標懸停在下面的內容上，它會滑回... – Relic 2012-03-13 21:52:55

他也是這樣的例子。我不知道這是否是預期的行爲。修復非常簡單，只需嵌套div即可完成。請參閱編輯。 – elclanrs 2012-03-13 21:55:56

我已經編輯你的小提琴現在看起來像這樣。應該給你你要往前走什麼樣的想法：

http://jsfiddle.net/GBkMB/4/

$("body").on("hover", ".fruit, .vegetable, .dairy", function(event){ 
    if(event.relatedTarget != $(this).next(".content")[0]){ 
     if(event.type == "mouseenter"){ 
     $('.content').slideUp('slow'); 
     $('.'+$(this).attr("class")+'_types').slideDown('slow'); 
     }else if(event.type == "mouseleave"){ 
     $('.content').slideUp('slow'); 
     } 
    }    
}); 
$("body").on("mouseleave", ".content", function(event){ 
    if(event.relatedTarget != $(this).prev("div")[0]){ 
     $(this).slideUp('slow');   
    } 
});

或：http://jsfiddle.net/GBkMB/6/ @elclanrs回答++

$('.content').on("mouseleave", function(event){ 
    if(event.relatedTarget != $(this).prev("div")[0]){ 
     $(this).slideUp('slow');   
    } 
}); 
var $elms = $('.fruit, .vegetable, .dairy'); 
$elms.on("hover", function(event) { 
    var $content = $(this).next('.content'); 
    if(event.relatedTarget != $content[0]){ 
     $content.stop(1,1).slideToggle(400); 
    } 
});

來源

2012-03-13 21:31:46 Relic

只有當jquery不可見時才滑下來

回答

相關問題