Jquery从不同的颜色脉动

Jquery pulsate from different colors

本文关键字：颜色 脉动 Jquery      更新时间：2023-09-26

我想从白色脉动到另一种颜色，但我不确定如何添加颜色到这个代码

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

你将需要这个插件与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);
    });
});

脉动只改变元素的不透明度，而不是颜色。你可以在你的元素下面放一个白色背景的元素来达到你想要的效果。

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

你可以用下面的方法创建你想要的脉冲效果:

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

对于一些想法:

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

edit:刚刚尝试运行上面的代码，当指定background-color时它不起作用。如果我在没有那个参数的情况下运行它，它工作得很好。我猜这是bug，因为我尝试了"background-color"answers"backgroundColor"

相关文章：