como mudar div cor de fundo com fadeIn / Out? - javascript, jquery, fadein, cor de fundo, fadeout

Como alterar a cor de fundo div com fadeIn / Out, eu só quero desvanecer cor de fundo, não a imagem de fundo, por favor me dê algum código útil ou solução

Respostas:

1 para resposta № 1

Apesar suportado apenas por navegadores modernos você também pode considerar o uso Transições CSS para conseguir o mesmo efeito

HTML

<div class="foobar"></div>

CSS

.foobar {
/* transition properties */
transition: background-color 2s;
-moz-transition: background-color 2s;
-webkit-transition: background-color 2s;
-o-transition: background-color 2s;

/* basic styling & initial background-color */
background-color:maroon;
width:100px;
height:100px;
}

/* Change background color on mouse over */
.foobar:hover {
background-color:blue;
}

Exemplo de trabalho aqui http://jsfiddle.net/eRW57/14/

---

0 para resposta № 2

<script>
$(document).ready(function(){
$("p").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
</script>

tente .. isso deve funcionar bem

---

0 para resposta № 3

Você não pode desbotar apenas o plano de fundo (colorido ou não) de um elemento usando fadeIn / fadeOut do jQuery.

O que você pode fazer é colocar uma camada adicional (DIV, etc) com sua cor de fundo e fade in / out sobre isso.

Em vez de algo assim:

<div id="my-background"></div>

Use esta estrutura:

<div id="container">
<div id="my-background"></div>
</div>

CSS

#container
{
position:relative;
width:200px;
height:100px;
background-image:url(my-background-image.jpg);
}
#my-background
{
height:100%;
width:100%;
background-color:blue;
position:absolute;
z-index:99;
}

Em seguida, use os métodos fadeIn / fadeOut do jQuery

JS

jQuery("#my-background").fadeOut();

---

0 para a resposta № 4

com isso você pode fadeout todas as div's com id # my-background

var $div = $("#my-background");
$div.each(function blank(){
$(this).animate({"backgroundColor": "#fff"},2000);
});

---