Question

我对Javascript和jQuery很新，我有这个jQuery动画，我想循环无限，但我似乎无法让它运作，因为我真的不知道如何重置它动画的属性，在重新启动之前。一些帮助使这个动画成为一个无限循环，并对它的解释将非常感激！

这是我到目前为止所做的：

function animation(){
   $('#logo img').fadeIn(2000);
   $('#logo img').delay(500).animate({'margin-top':'2%'}, 1000);
   $('#infoOne').delay(3500).fadeIn(2000).delay(2000).fadeOut(1000);
   $('#infoTwo').delay(8500).fadeIn(2000).delay(2500).fadeOut(1000);
   $('#link').delay(14000).animate({opacity: 1}, 2000);
   $('#bottom').delay(14000).animate({opacity: 1, 'bottom':'0'}, 1900);
   $('#logos').delay(14000).animate({opacity: 1, 'margin-top':'10%'}, 2000);
};

   setInterval(animation(), 16000);

Answer 1

您似乎正在使用大量延迟来延迟队列中的动画（即事件执行队列）。在stop再次开始动画之前，您可以使用finish，setInterval或clearQueue。

Answer 2

嘿，你可以用CSS3动画做同样的动画。尝试不使用jQuery进行动画处理，因为它为元素添加了内联样式，这可能会给应用程序性能带来一些问题。只需编写以下CSS：

#logo img {
  animation: 2s fadeIn 1 alternate backwards, 1s transform 0.5s infinite alternate backwards;
}
#infoOne {
  animation: 2s fadeIn 3.5s infinite alternate backwards;
}
#infoTwo {
  animation: 2s fadeIn 8.5s infinite alternate backwards;
}
#link {
  animation: 2s fadeIn 14s 1 alternate backwards;
}
#bottom {
  animation: 2s toBottom 5s 1 backwards ease-in-out;
  transform: translateY(100%);
}
#logos {
  animation: 1s fadeIn 1 alternate backwards, 5s toBottom 0.5s infinite alternate backwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes toBottom {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes transform {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(20%);
  }
}

<div id="logo">
  <img src="https://blog.polymer-project.org/images/logos/p-logo.png" width="50px" />
</div>

<p id="infoOne">Welcome to the Polymer website!</p>
<p id="infoTwo">Here we have some answer to christian24 and solving it with CSS.</p>

<a href="http://polymer-project.org">Polymer Project website</a>

<p id="bottom">BOTTOM TEXT</p>

<p id="logos">LOGOS HERE</p>

jQuery动画无限循环

2 个答案: