시간 지연을 추가하는 방법

Question

마우스 오버시 사용자 정의 클래스를 추가하고 싶습니다. 그래서 마우스가 .leftbar 위에 올려 졌을 때, 클래스가 추가되고 팝업되어야합니다 (나는 그의 CSS를 설정했습니다). 팝업창에 slow 또는 시간 지연을 어떻게 추가합니까?

<script> 
$(document).ready(function(){ 
$(".leftbar").mouseenter(function() { 
$("body").addClass("myclass"); 
}); 
}); 

$(document).ready(function(){ 
$(".leftbar").mouseleave(function() { 
$("body").removeClass("myclass1"); 
}); 
}); 
</script> 

나는

감사합니다 행운과 this- $("body").addClass("myclass" , '300');을 시도!

Answer 1

당신의 setTimeout

$(document).ready(function(){ 
    $(".leftbar").mouseenter(function() { 
     window.setTimeout(function(){ 
      $("body").addClass("myclass"); 
     }, 300); 
    }); 
}): 

이 https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

Answer 2

커서가 떠날 때 그것을 취소해야되고하는 setTimeout 사용을 참조하십시오 사용할 수 있습니다.

사소한 오류이지만, myclass != myclass1.

$(document).ready(function(){ 
    var barTimeout = 0; 
    $(".leftbar").on({ 
     mouseenter: function(){ 
      barTimeout = setTimeout(function(){ 
       $("body").addClass("myclass"); 
      }, 300); 
     }, 
     mouseleave: function(){ 
      if(typeof barTimeout !== 'undefined') clearTimeout(barTimeout); 
      $("body").removeClass("myclass"); 
     } 
    }); 
}); 

JSFiddle

Answer 3

당신은 당신이 그것으로 어떤 애니메이션 매개 변수를 전달할 수있는 jQuery를 UI 방식 addClass 한 번 봐 걸릴 수 있습니다. 예 여기 http://api.jqueryui.com/addClass/

사용에 대한 문서보기, 그것은 jQuery를 라이브러리에 대한 참조를 추가 addClass()

에 지연을 추가로 간단해야, 다음 코드를 변경;

$("body").addClass("myclass", 300); 

Answer 4

당신은 이런 식으로 작업을 수행 할 수 있습니다

$(document).ready(function() { 
    $(".leftbar").hover(function() { 
     $(this).delay(300).queue(function(next){ 
      $(this).addClass("myclass"); 
      next(); 
     }); 
    }, function(){ 
     $(this).delay(300).queue(function(next){ 
      $(this).removeClass("myclass"); 
      next(); 
     }); 
    }); 
}); 

여기를 체크 아웃 : JSFiddle이