Um nur backgronud Farbe auszublenden

Question

Ich habe eine div mit Hintergrund rot. Wenn ein Benutzer die Seite öffnet, möchte ich, dass die Hintergrundfarbe ausgeblendet wird. Div-Inhalte sollten weiterhin sichtbar sein.

I verwendet:

$(".notificationExtraDetailsBlockColored").animate(5000, "slow", function() { 
     $(this).fadeIn("slow"); 
     $(this).css("background-color", "#FFF"); 
}); 

Aber es scheint, nur die Hintergrundfarbe zu ändern, nicht wie ein Fade-out-Effekt wirkt.

Answer 1

Sie werden die Hintergrundfarbe mit rgba animieren. Leider Farben mit jQuery, Animieren bedeutet loading one not-so-small plugin, eine Erweiterung der ursprünglichen jQuery Farbe Plugin, also, wenn nicht etwas zu flexibel, dann können Sie immer setInterval verwenden Sie das Element in Frage zu animieren:

// rgb(255, 255, 255) = white 
var color = [255, 255, 255].join(',') + ',', 
    transparency = 1, 
    element = this, 
    timeout = setInterval(function(){ 
     if(transparency >= 0){ 
      element.style.backgroundColor = 'rgba(' + color + (transparency -= 0.015) + ')'; 
      // (1/0.015)/25 = 2.66 seconds to complete animation 
     } else { 
      clearInterval(timeout); 
     } 
    }, 40); // 1000/40 = 25 fps 

Natürlich, wenn Sie brauchen etwas Komplexes, Sie können immer das Plugin verwenden, das ich oben erwähnt habe. Rgba wird nur in IE9 + und allen anderen modernen Browsern unterstützt, daher sollten Sie Alternativen für Benutzer mit IE8 und niedriger anbieten.

Sehen Sie diesen Code hier zu arbeiten: http://jsfiddle.net/DCFem/2/