jquery 배경색 변경

이 예제를 사용하여 jquery를 시험해 보았습니다.

 $(document).ready(function(){
      $("button").mouseover(function(){
        $("p#44.test").css("background-color","yellow");
        $("p#44.test").hide(1500);
        $("p#44.test").show(1500);
        $("p#44.test").css("background-color","red");
      });
    });

나는 다음과 같은 일이 일어날 것으로 예상했다.

1. Color of <p> to turn yellow
2. <p> to slowly fade
3. <p> to slowly show
4. Color of <p> to turn red

그러나 이것은 실제로 일어난 일입니다.

1. <p> turned red
2. <p> slowly hid away
3. <p> slowly showed

왜 그런 겁니까?

이 .css()함수는 애니메이션 실행 뒤에 대기하지 않고 즉시 실행됩니다.

당신이 겪고있는 행동에 맞추려면 다음을 수행해야합니다.

$(document).ready(function() {
  $("button").mouseover(function() {
    var p = $("p#44.test").css("background-color", "yellow");
    p.hide(1500).show(1500);
    p.queue(function() {
      p.css("background-color", "red");
    });
  });
});

이 .queue()함수는 애니메이션 실행이 끝날 때까지 기다린 다음 제공된 함수에있는 모든 것을 시작합니다.

이것이 다음과 같은 방법입니다.

암호:

$(function(){
  $("button").mouseover(function(){
    var $p = $("#P44");
    $p.stop()
      .css("background-color","yellow")
      .hide(1500, function() {
          $p.css("background-color","red")
            .show(1500);
      });
  });
});

데모 : http://jsfiddle.net/p7w9W/2/

설명:

배경색을 전환하기 전에 애니메이션 함수에서 콜백을 기다려야합니다. 또한 숫자 ID : 만 사용해서는 안되며 ID가있는 경우 <p>선택기에 클래스를 포함시키지 않아야합니다.

또한 코드를 향상 시켰습니다 (jQuery 객체 캐싱, 체인 등).

업데이트 : VKolev 에서 제안한 것처럼 항목을 숨길 때 색상이 변경됩니다.

마지막 색 페이드를 지연 시키십시오.

$("p#44.test").delay(3000).css("background-color","red");

HTML에서 id 속성에 유효한 값은 무엇입니까?
ID는 숫자로 시작할 수 없습니다 !!!