[英]how to change div background-color with fadeIn/Out?
如何使用淡入/淡出更改div背景颜色,我只想淡化背景颜色,而不是背景图片,请给我一些有用的代码或解决方案
尽管仅受现代浏览器支持,但您也可以考虑使用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/
您不能使用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();
<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>
试试吧..那应该很好
有了这个,您可以淡出ID为#my-background的所有div
var $div = $('#my-background');
$div.each(function blank(){
$(this).animate({'backgroundColor': '#fff'},2000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.