Question

所以基本上，我想使用似乎可以在Codepen上工作的东西。 CodePen的链接在这里： https://codepen.io/anon/pen/JMOQzE

主要关注点：Javascript应该可以处理动画，但是没有显示出来。谢谢评论部分的提醒

我基本上复制了所有CSS和Javascript。然后我的HMTL看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./style.css" >
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="./script.js"></script>
    </head>

    <body>

        <div class = "wrapper">
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>


    </body>
</html>

动画没有出现。如上所示，我确保在那里链接jQuery。我尝试在VSCode中单击Control + click，然后将其链接到正确的文件。控制台上也没有错误消息。我迷路了。可能是什么问题呢？谢谢

Answer 1

完成HTML加载后，您可能需要执行javascript代码。

在此处输入您的代码

$( document ).ready(function() {
    // HERE
});

更多信息：https://learn.jquery.com/using-jquery-core/document-ready/

Answer 2

此代码在chrome浏览器中对我有效

只需在声明后调用您的create函数。

您也可以使用文档准备功能

function create(i) {

  var width = Math.random() * 8;
  var height = width * 0.4;
  var colourIdx = Math.ceil(Math.random() * 3);
  var colour = "red";
  switch (colourIdx) {
    case 1:
      colour = "yellow";
      break;
    case 2:
      colour = "blue";
      break;
    default:
      colour = "red";
  }
  $('<div class="confetti-' + i + ' ' + colour + '"></div>').css({
    "width": width + "px",
    "height": height + "px",
    "top": -Math.random() * 20 + "%",
    "left": Math.random() * 100 + "%",
    "opacity": Math.random() + 0.5,
    "transform": "rotate(" + Math.random() * 360 + "deg)"
  }).appendTo('.wrapper');

  drop(i);
}

function drop(x) {
  $('.confetti-' + x).animate({
    top: "100%",
    left: "+=" + Math.random() * 15 + "%"
  }, Math.random() * 3000 + 3000, function() {
    reset(x);
  });
}

function reset(x) {
  $('.confetti-' + x).animate({
    "top": -Math.random() * 20 + "%",
    "left": "-=" + Math.random() * 15 + "%"
  }, 0, function() {
    drop(x);
  });
}

for (var i = 0; i < 250; i++) {
  create(i);
}

body {
  margin: 0;
  overflow: hidden;
}

.wrapper {
  position: relative;
  min-height: 100vh;
  border: 1px solid red;
}

[class|="confetti"] {
  position: absolute;
}

.red {
  background-color: #E94A3F;
}

.yellow {
  background-color: #FAA040;
}

.blue {
  background-color: #5FC9F5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Javascript动画未显示

2 个答案: