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

您可以通过这种方式使用动画重新创建所需的脉冲效果：

$(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 );
  });
});

编辑：只是尝试运行上面的代码，并且在指定background-color时它不起作用。如果我没有那个参数运行它，它工作得很好。当我尝试使用“background-color”和“backgroundColor”

时，猜猜它有多乱

Jquery从不同的颜色脉动

4 个答案: