1

如何使用淡入/淡出更改 div 背景颜色，我只想淡化背景颜色，而不是背景图像，请给我一些有用的代码或解决方案

4

4 回答 4

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/

于 2012-11-14T06:02:04.820 回答
0

你不能只使用 jQuery 的淡入/淡出淡化元素的背景（颜色或其他）。

您可以做的是放置一个带有背景颜色的附加图层（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();
于 2012-11-14T03:07:36.733 回答
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>

试试看..应该可以的

于 2012-11-14T03:07:52.650 回答
0

有了这个，你可以淡出所有带有 id #my-background 的 div

var $div = $('#my-background');
  $div.each(function blank(){
  $(this).animate({'backgroundColor': '#fff'},2000);
});
于 2018-01-15T12:14:20.247 回答