jQuery 페이드 인 및 페이드 아웃 이미지의 호버

Question

페이지에 네 개의 이미지가 있습니다. 마우스를 가져 가면 주 텍스트가 해당 이미지와 관련된 텍스트로 바뀝니다. 작동하지만 버그가 있습니다. 천천히 롤오프하고 을 천천히 굴리면 나는 원하는 효과를 얻습니다. 신속하게 두 롤오버의 콘텐츠 표시. 여기에 내가 할 수 있어야 할 필요가있는 버전이 있습니다. 요소를 숨기는 경우

var timeout; 
$(document).ready(function() { 
    $(".btn").hover(
     function() { 
      clearTimeout(timeout) 
      $(this).css({ cursor: "pointer" }); 
      $(".mainText").hide(); 
      $(".replacementText").slideDown("slow"); 
     }, 
     function() { 
      timeout = setTimeout(function(){ 
      $(".replacementText").hide(); 
      $(".mainText").slideDown("slow"); 
      },250); 
     }); 
}); 

Answer 1

, 당신은 (.stop()를) 취소가 즉시 사라 때문에 발생하는 것 반대 슬라이드 애니메이션이 필요합니다

<img src="btn-open.gif" class="btn" /> 
<div class="mainText"> 
<h1>Main text</h1> 
<p>Morbi mollis auctor magna, eu sodales mi posuere elementum. Donec lacus lorem, vestibulum sed luctus ac, tincidunt sit amet eros. Nullam tristique lectus lobortis nibh pharetra placerat. Aliquam quis tellus mauris. Quisque eu convallis elit. Sed vitae libero est. Suspendisse laoreet magna magna, vitae malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eros ipsum, interdum et volutpat sed, commodo aliquam odio. Maecenas auctor condimentum mi. Maecenas ante eros, tristique nec viverra sed, molestie sit amet nulla. Suspendisse vitae turpis ac felis rutrum interdum.</p> 
</div> 
<div class="replacementText"> 
<h1>Replacement text</h1> 
<p>Nulla ac magna nec quam cursus mollis eget a nulla! Vestibulum quis nibh ipsum, ut vehicula leo. Etiam ac felis suscipit mi semper vehicula. Praesent est mi, suscipit sit amet bibendum at, porta quis elit. Integer lectus est, consequat non sodales ac, pharetra sit amet tellus. Suspendisse porttitor massa a dolor suscipit sed ullamcorper ipsum vehicula. In malesuada augue sit amet ante volutpat euismod. Ut vel felis sed enim placerat ultricies. Aliquam erat volutpat. Vivamus rutrum; ante vitae euismod accumsan, felis odio lacinia magna, eu viverra nisl metus non ligula? In metus nisi, viverra vel scelerisque non, ullamcorper sed arcu? In hac habitasse platea dictumst. Donec laoreet dapibus quam vitae pulvinar. Morbi ut purus nisl. Nulla eu velit ipsum; vel mattis magna. Aenean sodales faucibus dapibus.</p> 
</div> 


$(document).ready(function() { 

$(".btn").hover(
function() { 
    $(this).css({ cursor: "pointer" }); 
    $(".mainText").hide(); 
    $(".replacementText").slideDown("slow"); 
}, 
function() { 
    $(".replacementText").hide(); 
    $(".mainText").slideDown("slow"); 

}); 

}); 

Answer 2

나는 뭔가처럼 숨기기 지연을 삽입하는 것이 좋습니다 이런 식으로 가져가 변화 할 때 :

$(".btn").hover(function() { 
    $(".mainText").stop(true, true).hide(); 
    $(".replacementText").slideDown("slow"); 
}, function() { 
    $(".replacementText").stop(true, true).hide(); 
    $(".mainText").slideDown("slow"); 
}).css({ cursor: "pointer" }); 

이 또한 내가 .css() 전화를 이동 ... 만 가져가 A의 cursor: pointer의 결과를 참조 nyway, 그래서 필요는 매번 적용되지하고, 정직이이 같은 동일한 효과를 스타일 시트에 모든 방법을 이동해야합니다 :

.btn { cursor: pointer; }