jQuery 마우스를 가리키면 사용합니다

저는 jQuery에 초보자입니다. 나는이 코드 조각을 가지고있다. 여기에 fiddle에 대한 링크가있다. 여기에서 #flip에 마우스를 올리면 마우스가 아래로 내려갈 때 마우스를 움직이면 아래로 내려갑니다. 지금부터는 잘 작동합니다. 그러나 누군가가 호버 (hover)를하고 나올 때 자동으로 실행되는 슬라이드에는 영향을 미치지 않도록 hoverIntent이 있어야합니다. 현재 실행중인 애니메이션을 중지 stop 추가 내 jQuery 코드는이jQuery 마우스를 가리키면 사용합니다

<script> 
$(document).ready(function(){ 
    $("#flip").hover(function(){ 
    $("#panel").slideToggle("slow"); 
    }); 
}); 
</script>

출처

2013-04-06 Anonymous

것 같습니다.

첫 번째 매개 변수는 대기중인 애니메이션을 제거하는 데 사용되고 두 번째 매개 변수는 현재 애니메이션을 즉시 완료하는 데 사용됩니다.

확인 documentation

업데이트 데모 : http://jsfiddle.net/Rqq6c/1/

출처

2013-04-06 06:29:20 Eli

컨테이너 요소에 콘텐츠를 감싸고 그 대신에 가져가 이벤트를 연결합니다. 그렇게하면 요소 중 하나를 가리 키지 않은 것입니다.

HTML

<div id="container"> 
    <div id="flip">Hover on panel to slide the panel down or up</div> 
    <div id="panel">Hello world!</div> 
</div>

자바 스크립트

$(document).ready(function(){ 
    $("#container").hover(function(){ 
    $("#panel").slideToggle("slow"); 
    }); 
});

보기 업데이트

출처

2013-04-06 06:31:53 Aiias

사용자가 바로 슬라이드가 실행되지 않습니다 요소를 통해 자신의 마우스와 함께 여행 할 경우 jsFiddle demo,
좌절감을 방지 :)
은 마우스가 여전히 #flip 이상인 경우 #panel을 표시하기 전에 300ms를 기다립니다. 당신이 #panel이
모두 당신의 요소를 부모에 추가 우리가 그것을 가져가 한 번에 열 유지하려면 데이터를 사용하여

호버 의도는 또한 LIVE DEMO

var $panel = $('#panel'); 

$("#flip").on('mouseenter mouseleave', function(e) { 
    return e.type=="mouseenter" ? panelOn() : panelOff() ; 
}); 

function panelOn() {  
    $panel.data('wait', setTimeout(function(){ 
     $panel.stop().slideDown(600); 
    },300)); 
} 

function panelOff() { 
    clearTimeout($panel.data('wait')); 
    $panel.stop().slideUp(600); 
}

속성 요소를 선택하고 트리거 요소 선택기를 ID로 변경하십시오.

출처

2013-04-06 06:42:53

jQuery 마우스를 가리키면 사용합니다

답변

관련 문제