Javascript анимация не отображается - PullRequest
Новая
       4

Javascript анимация не отображается

0 голосов
/ 21 апреля 2020

Итак, я хотел использовать что-то, что работает на 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 там. Я попробовал control + click в VSCode, и он связался с правильными файлами. На консоли также нет сообщений об ошибках. Я потерялся. В чем может быть проблема? Спасибо

Ответы [ 2 ]

3 голосов
/ 21 апреля 2020

Вам, вероятно, понадобится выполнить код javascript, когда вы завершите sh загрузку HTML.

Введите свой код здесь 

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

Дополнительная информация: https://learn.jquery.com/using-jquery-core/document-ready/

1 голос
/ 21 апреля 2020

Этот код работает для меня в chrome браузере

Просто вызовите свою функцию создания после объявления.

Вы также можете использовать функцию готовности документа для того же 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...