Jquery 슬라이드가 아직 보이지 않는 경우에만 내립니다.

Question

Jquery를 사용하면 간단한 문제가 있습니다. 메뉴 제목 아래에 자세한 정보를 표시하려고하지만 인터페이스가 너무 매끄럽지 않습니다.

1. 당신 경우 : 몇 가지 시도의 몇 시간 후, 나는 간단한 대답

   봐

   두 문제 예를 this에서이 있는지 처음부터 다시 왔어요 한 번에 여러 범주에 마우스를 올려 원하는 범주로 이동하면 애니메이션은 다른 애니메이션을 중지하지 않고 마우스가 현재 마우스로 가리키고있는 애니메이션 만 애니메이션화하는 대신 다른 모든 애니메이션을 계속 실행합니다.

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의 :

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