Jquery изменить цвет фона

Question

Я испытывал 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 

Почему?

Answer 1

Функция .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() функция ожидает запуска анимации выбежать, а затем огонь все, что находится в поставляемой функции.

Answer 2

попробуйте поставить задержку при последнем исчезновении цвета.

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

What are valid values for the id attribute in HTML?
ID не может начинаться с цифры !!!

Answer 3

Вот как это должно быть:

Код:

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

Объяснение:

Вы ч чтобы дождаться обратного вызова анимационных функций перед переключением цвета фона. Вы также не должны использовать только числовой идентификатор: s, и если у вас есть идентификатор вашего <p>, вы не должны включать класс в свой селектор.

Я также повысить ваш код (кэширование объекта JQuery, цепочки и т.д.)

Update: Как было предложено VKolev цвет теперь меняется, когда элемент скрыт.