Jqueryがまだ表示されていない場合のみスライドする

Question

Jqueryを使用すると簡単な問題が発生します。メニュー見出しの下に詳細な情報を表示したいのですが、インターフェイスがあまり滑らかではありません。

1. あなたの場合：いくつかのことを試してみるの数時間後、私は簡単な答え

   this例を見て

   2つの問題があるかどうかを確認するために戻って最初に来ています一度に複数のカテゴリにマウスを移動して、必要なカテゴリに移動すると、アニメーションは他のアニメーションをすべて停止し、マウスが現在マウスオーバーしているアニメーションのみをアニメーション化します。

2. すでに開いているカテゴリにマウスを置くと、それでもアニメーションが実行されますが、コンテンツがまだ表示されていない場合にのみアニメーションを実行します。これを行うことができる単純なif文はありますか？

Answer 1

$('.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 S：

<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/

Answer 2

私はこのように見えるようにフィディルドを編集しました。

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