jQuery动画无限循环

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

似乎您使用了很多延迟，这些延迟用于延迟队列（即事件执行队列）中的动画。 在setInterval再次启动动画之前，可以使用stop ， finish或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>