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");

ค่าที่ถูกต้องสำหรับแอตทริบิวต์ id ใน HTML คืออะไร
ID ขึ้นต้นด้วยตัวเลขไม่ได้ !!!