Jquery 배경색 변경

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()함수는 실행 중인 애니메이션이 소진될 때까지 기다렸다가 제공된 함수에 있는 것을 발사합니다.

마지막 색이 바래는 것을 연기해 보세요.

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

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

이렇게 해야 합니다.

코드:

$(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에서 제안한 대로 아이템을 숨길 때 색상이 변경됩니다.

언급URL : https://stackoverflow.com/questions/4283141/jquery-change-background-color