javascript - jQuery 使用淡入淡出更改背景颜色并延迟返回原始颜色

标签 javascript jquery css

我有以下功能,应该用淡入淡出改变背景颜色,然后使用延迟返回到原来的颜色。并无休止地重复。

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

不过好像不行。。。 任何想法如何解决它?

最佳答案

请不要忘记包含 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>

关于javascript - jQuery 使用淡入淡出更改背景颜色并延迟返回原始颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28389322/

相关文章:

java - 使用 Java 获取 CSS 文件中图像的 URL?

html - css 代码部分工作?

JavaScript 网站错误 : Uncaught TypeError: Failed to execute 'appendChild' on 'Node'

javascript - Bootstrap - 将折叠与分段按钮结合起来

javascript - 帮助自动旋转无限 jquery 轮播。无法让轮播无限循环而不是 'rewind'

javascript - 按字符串对 Javascript 对象数组进行排序

javascript - 仅在使用 Javascript(Jquery) 单击背景时退出 Div [对于弹出窗口]

javascript - 加载时 KO 5 秒延迟破坏了我的 UI

javascript - 有没有一种方法可以在两个 AngularJS Web 解决方案与 Visual Studio 之间共享 javascript 代码?

javascript - 网格组件的嵌套单文件组件问题