Jquery Hintergrundfarbe ändern

Ich habe jquery mit diesem Beispiel ausprobiert:

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

Ich habe Folgendes erwartet:

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

Aber genau das ist tatsächlich passiert:

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

Warum ist das so?

Die .css()Funktion steht nicht hinter laufenden Animationen in der Warteschlange, sondern ist sofort verfügbar.

Um dem gewünschten Verhalten zu entsprechen, müssen Sie Folgendes tun:

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

Die .queue()Funktion wartet, bis die ausgeführten Animationen abgelaufen sind, und löst dann alles aus, was in der bereitgestellten Funktion enthalten ist.

So sollte es sein:

Code:

$(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/

Erläuterung:

Sie müssen auf den Rückruf der Animationsfunktionen warten, bevor Sie die Hintergrundfarbe wechseln. Sie sollten auch nicht nur numerische IDs verwenden: s. Wenn Sie dort eine ID <p>haben, sollten Sie keine Klasse in Ihre Auswahl aufnehmen.

Ich habe auch Ihren Code erweitert (Caching des jQuery-Objekts, Verkettung usw.)

Update: Wie von VKolev vorgeschlagen, ändert sich die Farbe jetzt, wenn das Objekt ausgeblendet wird.

Versuchen Sie, die letzte Farbüberblendung zu verzögern.

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

Was sind gültige Werte für das ID-Attribut in HTML?
IDs können nicht mit Ziffern beginnen !!!