fadeIn 和 Fadeout css 背景颜色在 jquery 中不起作用答案

【问题标题】：fadeIn and Fadeout css background color not working in jqueryfadeIn 和 Fadeout css 背景颜色在 jquery 中不起作用
【发布时间】：2016-08-26 06:44:29
【问题描述】：

FadeIn 和 FadeOut 背景颜色不变。

当我点击 whatup 链接时，我的按钮应该以红色和白色闪烁，下面是 html 代码

<a id="blkwhatsup" href="#" >whats up</a>
<input id="blkbtn" type="submit" value="2">

以下是 jquery 的代码，当我单击 whatup 链接时，我的按钮应该会随着淡入和淡出闪烁。它正在闪烁，但按钮的背景颜色不会改变

$('#blkwhatsup').click(function(e) {  
    interval = setInterval(function() { 
         $('#blkbtn').fadeOut({ backgroundColor: '#90191c',color:'#fff', border: '1px solid #90191c' }, 300) 
         $('#blkbtn').fadeIn( { backgroundColor:'#fff', color: '#90191c', border: '1px solid #90191c'}, 300); 
    }, 1000); 
});

【问题讨论】：

这些方法不允许传递属性。 api.jquery.com/fadeOut

标签： jquery css fadein fadeout

【解决方案1】：

这是一个适用于淡出和淡入背景颜色的示例

$('#doit').on('click', function(e) {
    e.preventDefault();
    $('#fadeout-div').show().delay(500).fadeOut(1100);
});

#wrapping-div {
 height:200px;
 width:300px;
 border:1px solid #999;
 padding:1px 8px;
 background-color: #fff;
 position:relative;
 z-index:1;
}

#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p><a href="#!/doit" id="doit">fadeOut/fadeIn</a></p>

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

【讨论】：