Question

我有一个代码，该代码显示累积次数，并显示星星，当人体在蓝屏中加载时会弹出4000分钟

身体加载时会调用函数 animatecongrat（），该函数在下面提供了两个函数

使用功能 animatetext（）对文本进行动画处理，而使用 animateblobs（）

进行动画处理的星星进行动画处理

我的问题是，对文本进行了动画处理，并且蓝屏出现了4000超时，但是没有出现星星（var numberOfStars = 20；在Blob中），并且在蓝屏中没有出现动画。

该如何解决？我如何达到这种效果？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>

<script>
var timeOut;

function animateCongrat() 
{
	debugger;
  $('.congrats').show();
  clearTimeout(timeOut);
  addBlueBody();
  reset();
  var numberOfStars = 20;

  for (var i = 0; i < numberOfStars; i++) {
    $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
  }

  animateText();
  animateBlobs();
  hideCongratAndBlueBody();
}

function addBlueBody() {
  $('body').addClass('bodyblue');
	$('#2').hide();	
	$('.hiddenimage').show();
}

function hideCongratAndBlueBody() {
    timeOut = setTimeout(() => {
    $('.congrats').hide();
    $('body').removeClass('bodyblue');		
  }, 4000);
}

function reset() {
  $.each($('.blob'), function(i) {
    TweenMax.set($(this), {
      x: 0,
      y: 0,
      opacity: 1
    });
  });

  TweenMax.set($('h1'), {
    scale: 1,
    opacity: 1,
    rotation: 0
  });
}

function animateText() {
  TweenMax.from($('h1'), 0.8, {
    scale: 0.4,
    opacity: 0,
    rotation: 15,
    ease: Back.easeOut.config(4),
  });
}

function animateBlobs() {
	debugger;

  var xSeed = _.random(500, 500);
  debugger;
  var ySeed = _.random(300, 300);

  $.each($('.blob'), function(i) {
    var $blob = $(this);
    var speed = _.random(1, 5);
    var rotation = _.random(5, 100);
    var scale = _.random(0.8, 1.5);
    var x = _.random(-xSeed, xSeed);
    var y = _.random(-ySeed, ySeed);

    TweenMax.to($blob, speed, {
      x: x,
      y: y,
      ease: Power1.easeOut,
      opacity: 0,
      rotation: rotation,
      scale: scale,
      onStartParams: [$blob],
      onStart: function($element) {
        $element.css('display', 'block');
      },
      onCompleteParams: [$blob],
      onComplete: function($element) {
        $element.css('display', 'none');
      }
    });
  });
}

@font-face {
  font-family: 'Sigmar One';
  font-style: normal;
  font-weight: 400;
  src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}

@import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
  overflow: hidden;
}

.dashed {
	border: 2px dashed #999 !important;
}
.bodyblue {
  background: #3da1d1;
  color: #fff;
  width: 0.3vw;
  height: 0.5vh;
}

.congrats {
  position: absolute;
  top: 140px;
  width: 550px;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: none;
}

h1 {
  transform-origin: 50% 50%;
  font-size: 50px;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
  text-align: center;
  width: 100%;
  position: absolute;
  top:-10.5vh;
  left: 0.3vw;
}


.blob {
  height: 50px;
  width: 50px;
  color: #ffcc00;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
  font-size: 30px;
  display: none;
}



.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}

.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

body{
    background-image:
    background-size: 100vw 100vh;
}

.next{
margin-right:50%;
margin-left:50%;
margin-bottom:10%;
float:right;
}

ul{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="animateCongrat();">
<div class="congrats"> 
  <h1>Congratulations!</h1>
</div>

</body>

jQuery效果函数调用在javascript中不起作用

0 个答案: