2016-03-23 7 views
-1

は素敵な溶液を得ましたそれは私のために働いた。しかし、bgoldstのコードで述べたように、ループ内で実行するにはフェードインが必要です。私はJSで全く新しいですし、それをどのように動作させるか、どのような提案もしていませんか?メイクフェードイン・アウト効果は無限(純粋なJS、ないのjQueryを)実行し

編集:私はルークの提案と

 <script type="text/javascript"> 
     var div = document.getElementById("foo"); 
     setInterval(function() { 
     div.style.transition="opacity 1.5s"; 
     div.style.opacity=0; 
     }, 1500); 
     setInterval(function() { 
     div.style.transition="opacity 1.5s"; 
     div.style.opacity=1; 
     }, 3005); 
     </script> 

しかし、フェードイン/アウト効果が対称動作を持っていないされてPure JavaScript fade in function

から甲斐の提案との中間の解決策を発見しました。

答えて

0

これにはCSSを使用できます.Javascriptは必要ありません。ただ、(あなたがしたい場合など、一連のキーフレーム)CSSアニメーションプロパティを使用して、このプロパティを設定します。あなたのコメントに基づいて

animation-iteration-count: infinite;

、ここでのペンは、私はそれはあなたがやりたいだろう作られている - あなたはアニメーションを背景色の変更から消えるように変更するだけです。私はそれが役に立てば幸い:

http://codepen.io/lukeschunk/pen/pyPpQO

+0

こんにちはルーク、答えるために感謝します。私は最初にキーフレームで試していましたが、私はIEを使って問題があったので、私はJSで試してみることにしました。 – b1919676

+0

javascriptの 'setInterval'メソッドを使うことができます。これは、一定の時間間隔で何かを永遠に実行します。アニメーションの長さに応じて、間隔の値を必要に応じてミリ秒単位で設定します。 –

+0

@ b1919676私はちょうどリンクしているペンを参照してください - 私はそれが正しいトラックにあなたを設定すると思います:) –

関連する問題