jQueryがあるとアニメーションが動作しないです。そもそもjQueryとは何ですか？ JSのことではないですか？ 下記のサイトをそのままコピペしたけれど背景しか表示されず泡が出てこない。 https://note.com/tamago_tofu/n/n65ea40858e52 コピペしたコード <!DOCTYPE html> <html> <head> <title>水中の泡</title> <meta charset="utf-8"/> <style type="text/css"> html,body { width: 100%; height: 100%; margin: 0; } .outer { display: table; width: 100%; height: 100%; } .inner { display: table-cell; vertical-align: middle; text-align: center; } /* Essential CSS - Makes the effect work */ body { background: -moz-linear-gradient(top right, #94ffe8, #3498db, #08009c); background: -webkit-linear-gradient(top right, #94ffe8, #3498db, #08009c); background: linear-gradient(to bottom left, #94ffe8, #3498db, #08009c); } .bubble { position: absolute; border-radius: 100%; border: 1px solid #fff; bottom: 1px; } </style> <script> jQuery(document).ready(function($){ var bArray = []; //泡のサイズの配列 var sArray = [6,8,10,12]; //泡が出る幅の範囲計算 for (var i = 0; i < $('body').width(); i++) { bArray.push(i); } //配列からランダムに値を出す関数 function randomValue(arr) { return arr[Math.floor(Math.random() * arr.length)]; } setInterval(function(){ //泡のサイズをランダムに選定 var size = randomValue(sArray); //body内のランダムな場所に泡を配置 $('body').append( '<div class="bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>' ); //5秒かけて下から上に泡が上るようにし、不透明度を下げる。上まで上った泡は取り除く $('.bubble').animate({ 'bottom': '100%', 'opacity' : '-=0.7' }, 5000, function(){ $(this).remove() }); //0.35秒ごとに泡を発生させる }, 350); }); </script> </head> <body> <div class="outer"> <div class="inner"> </div> </div> </body> </html> そのままコピペしただけなのにVS Codeは何カ所か誤りを示しています。よく分かりません。
JavaScript
