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

脈動は要素の不透明度のみを変更し、色は変更しません。要素の下に白い背景の要素を配置して、必要なものを取得できます。

お気に入り： <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 );
  });
});

編集: 上記のコードを実行しようとしたところ、背景色が指定されたときに機能しませんでした。そのパラメーターなしで実行した場合でも、正常に機能しました。「background-color」と「backgroundColor」の両方で試したので、バグがあると思います