如何用fadeIn / Out更改div背景颜色,我只想淡化背景颜色,而不是背景图片,请给我一些有用的代码或解决方案
答案 0 :(得分:1)
虽然only supported by modern browsers您也可以考虑使用CSS transitions来达到同样的效果
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;
}
答案 1 :(得分:0)
你不能使用jQuery的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;
}
然后使用jQuery的fadeIn / fadeOut方法
JS
jQuery("#my-background").fadeOut();
答案 2 :(得分:0)
<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>
试试..应该可以正常工作
答案 3 :(得分:0)
有了这个,你可以淡出所有div的id#my-background
var $div = $('#my-background');
$div.each(function blank(){
$(this).animate({'backgroundColor': '#fff'},2000);
});