comment changer la couleur de fond div avec fadeIn/Out?

Question

Comment changer la couleur de fond div avec fadeIn/Out, je veux seulement fondu couleur d'arrière-plan, pas d'image de fond, S'il vous plaît donnez-moi un code ou une solution

Answer 1

Vous ne pouvez pas fondu seulement l'arrière-plan (couleur ou autre) d'un élément utilisant fadeIn/fadeOut de jQuery.

Ce que vous pouvez faire est de placer un calque supplémentaire (DIV, etc) avec votre couleur d'arrière-plan et un fondu entrant/sortant sur cela.

Au lieu de quelque chose comme ceci:

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

Utilisez cette structure:

<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; 
} 

Ensuite, utilisez les méthodes de jQuery fadeIn/fadeOut

JS

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

Answer 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> 

l'essayer .. qui devrait fonctionner correctement

Answer 3

Bien que only supported by modern browsers vous pourriez aussi envisager d'utiliser CSS transitions pour obtenir le même effet

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; 
} 

Exemple de travail ici, http://jsfiddle.net/eRW57/14/

Answer 4

avec cela, vous pouvez fadeOut tous les années div avec id # my-fond

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