jQuery通过淡入淡出改变背景颜色并延迟返回原始颜色

【问题标题】：jQuery change background color with fade and return back to original with delayjQuery通过淡入淡出改变背景颜色并延迟返回原始颜色
【发布时间】：2015-04-07 23:39:10
【问题描述】：

我有以下功能，应该是通过淡入淡出改变背景颜色，然后使用延迟返回原始颜色。并无休止地重复。

$(function () {
    $('div').animate({background-color: 'blue'}, 'slow', function () {
    $(this).delay(500).animate({background-color: 'red'}, 'slow');
 }); 
});

但它似乎不起作用...... 任何想法如何解决它？

【问题讨论】：

是吗？ stackoverflow.com/questions/4713477/…
你有没有偶然解决你的问题？

标签： javascript jquery css

【解决方案1】：

请不要忘记包含 jquery-ui 库。否则它不起作用

$(document).ready(function() {

  $('.sample').click(function() {

    $(this).animate({
      backgroundColor: "green"
    }, 1000).delay(2000).queue(function() {
      $(this).animate({
        backgroundColor: "red"
      }, 1000).dequeue();
    });

  });

});

.sample {
  font: normal 12px/18px 'Arial';
  color: #fff;
  background: red;
  padding: 20px;
  cursor: pointer
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="sample">
Click Me to see smooth background color transition and back to original background
</div>
</body>

【讨论】：