Question

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

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

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

Answer 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>

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

1 个答案: