Як змінити фоновий колір div з fadeIn / Out? - javascript, jquery, fadein, фонові кольори, fadeout

Як змінити кольоровий колір div за допомогою fadeIn / Out, я хочу лише зникнути кольором тла, а не фоновим зображенням. Будь ласка, дайте мені корисний код чи рішення

Відповіді:

1 для відповіді № 1

Хоча підтримується лише сучасними браузерами ви можете також розглянути можливість використання Переходи CSS досягти того ж ефекту

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

Робочий приклад тут, http://jsfiddle.net/eRW57/14/

---

0 для відповіді № 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>

спробуйте .. це повинно добре працювати

---

0 для відповіді № 3

Ви не можете зникати лише фоном (кольором чи іншим чином) елемента, використовуючи jQuery "s fadeIn / fadeOut.

Що ви можете зробити, так це розмістити додатковий шар (DIV тощо) з кольором вашого фону та зникати / вимивати на ньому.

Замість чогось такого:

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

Використовуйте цю структуру:

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

Потім скористайтеся методами fadeIn / fadeOut jQuery

JS

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

---

0 для відповіді № 4

за допомогою цього ви можете зникнути всі div з ідентифікатором # my-background

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

---