背景色をグラデーションするトグル機能

基本的にはdivの背景色を徐々に変更する機能を切り替えるようにしています。 gradientify（）関数を実行する別のscript.jsファイルがあります。背景色をグラデーションするトグル機能

私はちょうど機能を切り替えるためのロジックが何であるかわからないんだけど...

index.htmlを

<body> 
    <button type="button" id="btn"></button> 
    <div style="width: 100px; height: 100px;"></div> 
</body>

script.js

$('#btn').click(function() { 
    $('div').toggle(function() { 
     $(this).gradientify({ 
     gradients: [ 
      { start: [49,76,172], stop: [242,159,191] }, 
      { start: [255,103,69], stop: [240,154,241] }, 
      { start: [33,229,241], stop: [235,236,117] } 
     ] 
    }); 
    }); 
});

出典

2016-12-02 Philip Savenok

おそらく <ボタンのonclick = "）（gradientify">んでした私が正しく理解していれば$ '、 – marcan2020

をクリックします＃toggle' [最初の引数として関数を受け付けません]（http://api.jquery.com/toggle/）。一般に、Javascriptに関して「機能を切り替える」と言うのは間違いです。最後に、 '$＃gradientify'のコードがなくても、エラーの原因を正確に知ることは不可能です。 –

...私は私のために動作しませんでした –

Jquery toggle関数は、要素の可視性を切り替えます。基本的にCSSプロパティーdisplayをdisplay: noneに設定します。グラデーションを切り替えるときに "gradientifyied"要素内のコンテンツを表示したい場合は、Jquery.toggleを使用することはできません。

悲しいことに、勾配化API doesn't provide any way to cancel the gradientsが要素に設定されると、要素のグラデーションを切り替える唯一の方法は、すべてを一緒にDOMから削除することです。

グラディエントが適用される前にclean要素のコピーを作成できます。グラディエントを削除する場合は、古い要素をDOMから削除し、保持したコピーを挿入します。

function toggleGradients() { 
 
    var gradientTargetCopy = $(".gradientTarget").clone() 
 
    var gradientsOff = true; 
 
    return function() { 
 
    if (gradientsOff) { 
 
     $('.gradientTarget').gradientify({ 
 
     gradients: [ 
 
      { start: [49,76,172], stop: [242,159,191] }, 
 
      { start: [255,103,69], stop: [240,154,241] }, 
 
      { start: [33,229,241], stop: [235,236,117] } 
 
     ] 
 
     }); 
 
    } else { 
 
     $('.gradientTarget').remove() 
 
     $('body').append(gradientTargetCopy) 
 
     gradientTargetCopy = $(".gradientTarget").clone() 
 
    } 
 
    gradientsOff = !gradientsOff 
 
    } 
 
} 
 

 
$('#btn').click(toggleGradients());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://codefog.github.io/jquery-gradientify/jquery.gradientify.min.js"></script> 
 

 
<body> 
 
    <button type="button" id="btn">Toggle gradients</button> 
 
    <div class="gradientTarget" style="width: 100px; height: 100px;">Hello!</div> 
 
</body>

出典

2016-12-02 01:52:28

説明していただきありがとうございます。それは本当に働いた！ –

単なるJavaScriptを使用しています。

var x = 3; //Length of amount of color options you want 
var bgcolor_num = Math.floor((Math.random() * x) + 1); 
     setInterval(function() { 
      if (bgcolor_num === 1) { 
       bgcolor = "#FF0000"; 
       bgcolor_num = 2; 
      } else if (bgcolor_num === 2) { 
       bgcolor = "#00FF00"; 
       bgcolor_num = 3; 
      } else { 
       bgcolor = "#0000FF"; 
       bgcolor_num = 1; 
      } 

      document.getElementById('whatever').style.backgroundColor = bg_color; 
     }, 12000);

何が起こるかは、変数xを定義し、1からxまでの数値をランダム化します。次に、間隔（12秒ごと、12,000ミリ秒ごとに実行される）によって、番号bgcolor_numが1,2,3のいずれかであるかどうかが判別されます。あなたが持っているオプションの量は、xに等しくなければならないことを忘れないでください。そうでなければ、それは "else"として実行され、カラーオプション＃1で始まります。

divにIDが設定されていることを確認し、実際に変更を引き起こす部分を再設定してください。

このような事例をお知りになりたい場合は、いつでも私のウェブサイトtyprograms.com/RGB.htmlにアクセスして、表示ソースを右クリックしてください！私は同様の方法を使用し、それはゆっくりと色を変更します。

出典

2016-12-02 01:42:00

これは非常に良い説明です。私はもう少しそれを掘り起こす必要があります...ありがとう！ –

背景色をグラデーションするトグル機能

答えて

関連する問題