javascript - 来自不同颜色的 Jquery 脉动

Question

我想从白色跳动到另一种颜色，但我不知道如何为这段代码添加颜色

  <script>
  $(document).ready(function() {
    $("#white36").click(function () {
          $('#book').effect("pulsate", { times:3000 }, 500);
    });
    });

  </script>

Answer 1

你将需要这个插件来用 jquery 动画颜色（它不是默认的）： http: //www.bitstorm.org/jquery/color-animation/

那么您可以执行以下操作：

var pulsateInterval = null, i = 0;
$(document).ready(function() {
    $('#white36').click(function() {
      // set interval to pulsate every 1500ms
      pulsateInterval = setInterval(function(){
          // animate back and forth
          $('#book').animate({
             background-color: 'red',
          }, 500).animate({
             background-color: 'white',
          }, 500);
          i++;
          // stop at 3000 pulsations
          if(i == 3000){
              clearInterval(pulsateInterval);
          }
      }, 1500);
    });
});

Answer 2

Pulsate 只改变元素的不透明度，而不是颜色。您可以在元素下方放置一个具有白色背景的元素以获得所需的内容。

喜欢： <div style="background:#ffffff;"><div id="my_elem" style="#006600"></div></div>

Answer 3

您可以通过这种方式使用 animate 重新创建您想要的脉冲效果：

$(document).ready(function() {
    $('#white36').click(function() {
      $('#book').animate({
        background-color: 'red',
      }, 300).animate({
        background-color: 'white',
      }, 300).animate({
        background-color: 'red',
      }, 300);
    });
});

Answer 4

对于一些想法：

$(document).ready(function() {
  $("#white36").click(function () {
    $("#book").animate({ 
      width: "50%",
      opacity: 0.3,
      fontSize: "3em", 
      borderWidth: "10px",
      color: "black",
      backgroundColor: "green"
    }, 1500 );
  });
});

编辑：刚刚尝试运行上面的代码，但在指定背景颜色时它不起作用。如果我在没有那个参数的情况下运行它，它工作得很好。当我尝试使用“背景颜色”和“背景颜色”时，猜猜它有问题