jquery CSS 변경 지연

Question

div 오렌지의 경계선을 만드는 코드를 작성한 후 두 번째 또는 두 번째로 검정색으로 변경 한 후 실제로 발생하는 것은 곧바로 검은 색으로 바뀌는 것입니다. 도움이 필요합니까? 감사!

코드 :

JQuery와 delay 기능은 ( fadeIn 또는 slideDown 같은 기능)를 fx 대기열에 추가 기능에서 작동

$('#newMessage1').css('border','2px solid #ffa800').delay(100).css('border','2px solid #000000'); 

Answer 1

. css은 이러한 함수 중 하나가 아닙니다 (이외의 다른 fx 대기열 인식 기능을 시도해도 작동하지 않습니다). docs에서

:

버전 1.4에서 jQuery를 추가는 .delay() 메소드는 우리가 에게 큐에에 따라 기능의 실행을 지연 할 수 있습니다. 표준 효과 대기열 또는 사용자 정의 대기열과 함께 사용할 수 있습니다. 큐에있는 후속 이벤트 만 지연됩니다. 예를 들어 은 효과 큐를 사용하지 않는 .show() 또는 .hide()의 인수없는 형식을 지연시키지 않습니다.

jQuery를 delay이 경우에 아마 갈 수있는 방법이 될 것입니다 네이티브 JS setTimeout,을 대신 할 수는 없습니다. 당신은, 예를 들어,이 (작업 예 here) 같은 것을 할 수있는 : 애니메이션처럼 CSS를 변경 영향 큐에 배치되지 않는 한

$('#newMessage1').css('border','2px solid #ffa800'); 

setTimeout(function() { 
    $("#newMessage1").css('border','2px solid #000000'); 
}, 1000); 

Answer 2

당신은 css()와 delay()을 사용할 수 없습니다.

대신, setTimeout를 사용해야합니다 :

$('#newMessage1').css('border','2px solid #ffa800'); 
setTimeout(function() { $('#newMessage1').css('border','2px solid #000000'); }, 1000); 

편집 : 테두리 색상을 애니메이션하려면 jQuery를 UI 코어를 포함하고 독립적으로 국경의 양쪽 애니메이션을 확인해야합니다. 이를 수행하는 방법의 예를 볼 수 있습니다 here.

Answer 3

왜 Jquery에서 .animate()를 사용하지 않습니까? 그냥 기본 국경을 위해 CSS를 설정 :

yourID 또는 클래스 { 국경 : 2 픽셀 고체 # ffa800; }

다음 JQuery와의 :

$ ("# yourID"() { '경계': '# 000000'}, 3000) 애니메이션.; < ---- 마지막 매개 변수는 지연 = 3 초입니다.

Answer 4

@ James-Allardice와 @ Luke-Bennet은 CSS 변경이 기본적으로 fx 대기열에 추가되지 않았지만 올바른 이유는 없습니다. 거기에 넣어 라.

두 번째 형태 인 .queue() method을 사용하면 대기열에 아무 것도 추가 할 수 있습니다. 표준 fx 대기열을 사용할 필요조차 없으며, 자신 만의 대기열을 만들 수 있습니다.

가 JQuery와 문서 페이지에 대한 몇 가지 좋은 예이지만, 여기에 사용자의 특정 요구를 해결하는 하나 :

$("#newmessage1").queue(function(){ 
    $(this).css("border", "2px solid #ffa800"); 
    $(this).dequeue(); 
}); 
$("#newmessage1").queue(function(){ 
    $(this).delay(500); 
    $(this).css("border", "2px solid black"); 
    $(this).dequeue(); 
} 

그것은 추한하고 우아하지만 그것은 setTimeout를 사용하는 것보다 더 좋을 수 있습니다.

더 나은 해결책은 @BorisD 권장대로 .animate() method을 사용하는 것입니다. 은 "100"당신이 원래 예제에서 지정한

$("#newmessage1").css("border", "2px solid #ffa800"); 
$("#newmessage1").animate({"border": "2px solid black"}, 500); 

주에만 0.1 초이다 : 그것은 당신이 내장하여 필요로하는 기능을 가지고있다. 나의 예제는 0.5 초를 사용한다.