[JQUERY] ) (CSS와 jQuery를 지연 ()를 사용하여

) (CSS와 jQuery를 지연 ()를 사용하여

해결법

1. ---

   1.지연 (), 애니메이션 (FX) 큐 작동한다. CSS의 속성을 변경하면 그 메커니즘을 통해 작동하지 않습니다, 따라서 지연 지시자의 영향을받지 않습니다.

   지연 (), 애니메이션 (FX) 큐 작동한다. CSS의 속성을 변경하면 그 메커니즘을 통해 작동하지 않습니다, 따라서 지연 지시자의 영향을받지 않습니다.

   해결 방법이 있습니다 -이 같은 대기중인 작업, 같은 속성의 변화를 삽입 할 수 있습니다 :

   $('#tip')
     .delay(800)
     .queue(function (next) { 
       $(this).css('display', 'none'); 
       next(); 
     });
   

   또한, 당신은 아마 대신에 .css ( '디스플레이', '없음')의 .hide ()를 사용한다.

   다음은 작업 예입니다 http://jsfiddle.net/redler/DgL3m/

2. ---

   2.작은 jQuery를 확장이 도움이 될 수 있습니다. 당신은 qcss를 호출 할 수 있습니다 :

   작은 jQuery를 확장이 도움이 될 수 있습니다. 당신은 qcss를 호출 할 수 있습니다 :

   $.fn.extend({
      qcss: function(css) {
         return $(this).queue(function(next) {
            $(this).css(css);
            next();
         });
      }
   });
   

   이것은 당신에게 쓰기를 할 수 있습니다 :

   $('.an_element')
      .delay(750)
      .qcss({ backgroundColor: 'skyblue' })
      .delay(750)
      .qcss({ backgroundColor: 'springgreen' })
      .delay(750)
      .qcss({ backgroundColor: 'pink' })
      .delay(750)
      .qcss({ backgroundColor: 'slategray' })
   

   이것은 체인 애니메이션을 정의하는 합리적으로 우아한 방법이 될 수 있습니다. 참고이 매우 간단한 형태로, qcss은 CSS 속성을 포함하는 단일 오브젝트 인수를 지원하는지. (당신은 예를 들어), 지원 .qcss ( '색'에 좀 더 많은 작업을 수행 할 '블루'가 것입니다.)

   여기 jsfiddle에 대한 예입니다.

3. ---

   3.켄 Redler의 대답 / 제안 추가 수 :

   켄 Redler의 대답 / 제안 추가 수 :

   넌 할 수있어 :

   $('#tip').delay(800).hide(0);
   

   0 여기에 중요하다. .hide에 값을 () 전달하면 암시 적으로 FX 큐에 추가하고, 따라서,이 의지 작업은 같은 예상됩니다.

4. ---

   4.모든 브라우저 테스트

   모든 브라우저 테스트

   $(document).ready(function () {
       var id = $("div#1"); // div id=1
       var color = "lightblue"; // color to highlight
       var delayms = "800"; // mseconds to stay color
       $(id).css("backgroundColor",color)
       .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g
       .css("backgroundColor",color).delay(delayms).queue(function() {
           $(id).css("backgroundColor",""); 
           $(id).dequeue();
       }); 
   });
   

from https://stackoverflow.com/questions/5396119/using-jquery-delay-with-css by cc-by-sa and MIT license