Jquery achtergrondkleur wijzigen

Ik probeerde jQuery uit met dit voorbeeld:

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

Ik verwachtte dat het volgende zou gebeuren:

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

Maar dit is wat er werkelijk gebeurde:

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

Waarom is dat?

Antwoord 1, autoriteit 100%

De functie .css()staat niet in de wachtrij achter het uitvoeren van animaties, maar is onmiddellijk.

Als u het gewenste gedrag wilt matchen, moet u het volgende doen:

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

De functie .queue()wacht tot de actieve animaties zijn afgelopen en vuurt vervolgens af wat zich in de meegeleverde functie bevindt.

Antwoord 2, autoriteit 9%

Zo zou het moeten zijn:

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/

Uitleg:

U moet wachten op de terugbellen op de animatiefuncties voordat u de achtergrondkleur schakelt. U moet ook niet alleen numerieke ID: s gebruiken, en als u een ID van uw <p>Daar hebt u daar geen klasse in uw selector op.

Ik heb ook uw code verbeterd (caching van het jQuery-object, het keten, enz.)

update:
Zoals gesuggereerd door VKOLEV De kleur verandert nu wanneer het artikel verborgen is.

Antwoord 3, Autoriteit 8%

Probeer een vertraging op de laatste kleur te plaatsen.

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

Wat zijn geldige waarden voor het ID-attribuut in Html?
ID’s kunnen niet beginnen met cijfers !!!