버튼이 제대로

Question

HTML 코드를 작동하지 숨기는 게

var hoverVariable=false; 
var hoverVariable2=false; 

$('#slickbox').hide(); 
$('#slick-slidetoggle').mouseover(function() { 
    hoverVariable2=true; 
    $('#slickbox').slideToggle(600); 
    return false; 
}) 
$('#slick-slidetoggle').mouseleave(function() { 
    hoverVariable2=false; 
    setTimeout(function(){ 
    if(!hoverVariable && !hoverVariable2){ 
    $('#slickbox').slideToggle(600); 
    return false;} 
    }, 1000); 
}) 
$('#slickbox').mouseleave(function() {      
    hoverVariable=false; 
    setTimeout(function(){ 
    if(!hoverVariable && !hoverVariable2){      
    $('#slickbox').slideToggle(600); 
    return false;} 
    return false; 
    }, 1000); 
}) 
$('#slickbox').mouseover(function() { 
     hoverVariable2=false; 

    hoverVariable=true; 

})​ 

CSS 코드 :

#slickbox { 
    background: black; 
    width:100px; 
    height: 135px; 
    display: none; 
    cursor:pointer; 
    color:white; 
} 
#slick-slidetoggle{ 
background: yellow; 
    width:100px; 
    height: 135px; 
    cursor:pointer; 
    color:black; 

} 
​ 

이제 원하는 동작은 그 마우스 노란색 사업부를 통해 슬라이드 때 ("wxyz") 검은 색 div ("abcd")가 아래로 내려 가야하고 검은 색 div로 이동하지 않고 마우스가 노란색으로 이동하면 검은 색 div sho 2 초 후에 uld가 숨어 있습니다.

이 현상이 발생합니다. 마우스가 노란색 div 밖으로 이동 한 직후 검은 div 위로 이동하면 검은 div는 마우스가 검은 색 div에있는 한 숨기면 안됩니다. 이것은 또한 일어나고있다.

다음 단계는 설명하기가 조금 어렵지만 마우스를 노란색 div 위로 이동하고 검은 색 div가 나왔을 때 마우스를 검은 색 div 위로 이동 한 다음 2 초 이내에 이동하면 시도해 볼 것입니다 (검은 색 div) 전체 애니메이션이 엉망이됩니다. 그것의 행동은 반대이다. 그러나 마우스가 2 초 이상 검은 색 div로 유지 된 다음 전체 스크립트가 제대로 실행되면 밖으로 이동됩니다.

이것은 더 잘 설명 할 수있는 링크입니다. http://jsfiddle.net/HAQyK/381/

Answer 1

) (해당 slideUp() 및 slideDown으로 slideToggle()를 교체하십시오 전화. http://jsfiddle.net/tppiotrowski/HAQyK/386/

var hoverVariable = false; 
var hoverVariable2 = false; 

$('#slickbox').hide(); 
$('#slick-slidetoggle').mouseover(function() { 
    hoverVariable2 = true; 
    $('#slickbox').slideDown(600); 
    return false; 
}) 
$('#slick-slidetoggle').mouseleave(function() { 
    hoverVariable2 = false; 
    setTimeout(function() { 
     if (!hoverVariable && !hoverVariable2) { 
      $('#slickbox').slideUp(600); 
      return false; 
     } 
    }, 1000); 
}) 
$('#slickbox').mouseleave(function() { 
    hoverVariable = false; 
    setTimeout(function() { 
     if (!hoverVariable && !hoverVariable2) { 
      $('#slickbox').slideUp(600); 
      return false; 
     } 
     return false; 
    }, 1000); 
}) 
$('#slickbox').mouseover(function() { 
    hoverVariable2 = false; 
    hoverVariable = true; 
})​ 

Answer 2

문제는 slideToggle이 복제 시간 초과 기능으로 인해 연속해서 두 번 발사 한 것 같습니다. 필요하지 않을 때 시간 제한 또는 간격을 처리 할 수있는 가장 깨끗한 방법은 당신이 그들을 제거하는 제어 할 수 있도록 변수에 저장하는 것입니다

// Defined in global scope 
var timer; 

$('#slick-slidetoggle').mouseleave(function() { 
    hoverVariable2=false; 
    // Timer set as function 
    timer = setTimeout(function(){ 
    if(!hoverVariable && !hoverVariable2){ 
     $('#slickbox').slideToggle(600); 
     // Timer no longer need and so cleared 
     clearTimeout(timer); 
    return false;} 
}, 1000); 
}); 

편집 :는로 대신 전환의 slideUp/slideDown을 추가 소외 위의 정답에 따라. 업데이트 된 jsFiddle이 올바른지 확인하십시오 : http://jsfiddle.net/HAQyK/390/

스크립트에 접근 할 수있는 또 다른 방법은 jQuerys 지연 funciton과 stop(); 애니메이션을 사용하는 것입니다. 컨테이너에 div의 랩과 코드의 훨씬 간단 블록을 가지고 :

$('#slick-container').mouseenter(function() { 
    $('#slickbox').stop().slideDown(600); 
}).mouseleave(function(){   
    $('#slickbox').stop().delay(1000).slideUp(600); 
}); 

여기를 체크 아웃 : http://jsfiddle.net/HAQyK/387/

Answer 3

솔루션을 다시 코딩했습니다. 바이올린 체크 아웃 here

 var hideB; 
     var $black = $('#slickbox'); 
     var $yellow = $('#slick-slidetoggle'); 

     function showBlack() { 
      if(hideB) window.clearTimeout(hideB); 
      $black.stop(true, true); 
      $black.slideDown(600); 
     } 

     function hideBlack() { 
      hideB = setTimeout(function() { 
       $black.stop(true, true); 
       $black.slideUp(600); } 
       , 1000); 
     } 

     $black.hide(); 

     $yellow.mouseenter(function() { 
      showBlack(); 
     }) 

     $yellow.mouseleave(function() { 
      hideBlack(); 
     }); 

     $black.mouseleave(function() { 
      hideBlack(); 
     }); 

     $black.mouseenter(function() { 
      showBlack(); 
     });