Jquery mengubah warna latar belakang

Saya mencoba jquery dengan contoh ini:

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

Saya berharap hal berikut terjadi:

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

Tetapi inilah yang sebenarnya terjadi:

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

Mengapa demikian?

The .css()Fungsi tidak mengantri di belakang berjalan animasi, itu seketika.

Untuk mencocokkan perilaku yang Anda cari, Anda harus melakukan yang berikut:

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

The .queue()menunggu fungsi untuk menjalankan animasi habis dan kemudian kebakaran apa pun yang dalam fungsi yang disediakan.

Beginilah seharusnya:

Kode:

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

Demo: http://jsfiddle.net/p7w9W/2/

Penjelasan:

Anda harus menunggu panggilan balik pada fungsi animating sebelum Anda beralih warna latar belakang. Anda juga seharusnya tidak hanya menggunakan ID numerik: s, dan jika Anda memiliki ID Anda di <p>sana, Anda tidak harus memasukkan kelas dalam pemilih Anda.

Saya juga meningkatkan kode Anda (caching objek jQuery, chaining, dll.)

Pembaruan: Seperti yang disarankan oleh VKolev , warnanya sekarang berubah ketika item disembunyikan.

coba tunda warna terakhir memudar.

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

Apa nilai yang valid untuk atribut id dalam HTML?
ID tidak dapat dimulai dengan angka !!!