Jquery thay đổi màu nền

Tôi đã thử jquery với ví dụ này:

 $(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");
      });
    });

Tôi dự kiến ​​những điều sau đây sẽ xảy ra:

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

Nhưng đây là những gì thực sự đã xảy ra:

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

Tại sao vậy?

Các .css()chức năng không xếp hàng đằng sau hình ảnh động chạy, nó ngay lập tức.

Để phù hợp với hành vi mà bạn theo đuổi, bạn cần thực hiện các bước sau:

$(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");
    });
  });
});

Các .queue()chờ đợi chức năng để chạy hình ảnh động để chạy ra ngoài và sau đó đám cháy bất cứ điều gì trong hàm cung cấp.

Đây là cách nó nên được:

Mã số:

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

Bản trình diễn: http://jsfiddle.net/p7w9W/2/

Giải trình:

Bạn phải đợi cuộc gọi lại trên các chức năng hoạt hình trước khi bạn chuyển màu nền. Bạn cũng không nên chỉ sử dụng ID số: s và nếu bạn có ID <p>ở đó, bạn không nên bao gồm một lớp trong bộ chọn.

Tôi cũng đã tăng cường mã của bạn (bộ nhớ đệm của đối tượng jQuery, chuỗi, v.v.)

Cập nhật: Theo đề xuất của VKolev , màu sắc hiện đang thay đổi khi mục bị ẩn.

hãy thử đặt một độ trễ trên màu phai cuối cùng.

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

Các giá trị hợp lệ cho thuộc tính id trong HTML là gì?
ID không thể bắt đầu bằng chữ số !!!