如何使用jQuery从上到下为div元素设置动画？

Question

我很难像顺时针位置一样在循环中从上到下移动 div 元素。 基本上，我想要，当页面加载时，div 开始以顺时针方向移动，而且我只想继续移动 div 元素，直到我关闭网页。有人可以帮我吗？

 $(document).ready(function() { if ($('.content').height() > $('.container').height()) { setInterval(function() { start(); }, 1000); } }); function animateContent(direction) { var animationOffset = $('.container').height() - $('.content').height() - 30; if (direction == 'up') { animationOffset = 0; } console.log("animationOffset:" + animationOffset); $('.content').animate({ "marginTop": (animationOffset) + "px" }, 5000); } function up() { animateContent("up") } function down() { animateContent("down") } function start() { setTimeout(function() { down(); }, 1000); setTimeout(function() { up(); }, 1000); setTimeout(function() { console.log("wait..."); }, 5000); }

 .container { height: 150px; padding: 0 10px; overflow: hidden; } .content { background: #eee; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Crousal</h1> <div class="container"> <div class="content"> <div>jQuery</div> <div>Script</div> <div>Net</div> <div>AngularJS</div> <div>ReactJS</div> <div>VueJS</div> <div>React Native</div> </div> </div>

Answer 1

你为什么不只使用 CSS 来制作这么简单的动画呢？ 像这样：

 .container { height: 150px; padding: 0 10px; overflow: hidden; } .content { background: #eee; animation-name: rotate; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate { from {transform:rotate(0);} to {transform:rotate(360deg);} }

 <div class="container"> <div class="content"> <div>jQuery</div> <div>Script</div> <div>Net</div> <div>AngularJS</div> <div>ReactJS</div> <div>VueJS</div> <div>React Native</div> </div> </div>

看起来我没有正确理解这个问题。 您仍然可以只使用CSS 。 在这种情况下，我将每个“文本”定位为absolute以便我可以在动画中使用属性top 。 像这样...这次您需要为每个“文本”指定一个名称。

 .container { height: 150px; padding: 0 10px; overflow: hidden; } .content { background: #eee; animation-name: rotate; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; position:relative; } .content div { position:absolute; left:0; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } .div1 { top:0px; animation-name: div1; } .div2 { top:18px; animation-name: div2; } .div3 { top:36px; animation-name: div3; } .div4 { top:54px; animation-name: div4; } .div5 { top:72px; animation-name: div5; } .div6 { top:90px; animation-name: div6; } .div7 { top:108px; animation-name: div7; } @keyframes div1 { 0% {top:0px} 14.19% {top:0px} 14.2% {top:18px} 28.49% {top:18px} 28.5% {top:36px} 42.79% {top:36px} 42.8% {top:54px} 57.09% {top:54px} 57.1% {top:72px} 71.39% {top:72px} 71.4% {top:90px} 85.59% {top:90px} 85.6% {top:108px} 99.99% {top:108px} 100% {top:0px} } @keyframes div2 { 0% {top:18px} 14.19% {top:18px} 14.2% {top:36px} 28.49% {top:36px} 28.5% {top:54px} 42.79% {top:54px} 42.8% {top:72px} 57.09% {top:72px} 57.1% {top:90px} 71.39% {top:90px} 71.4% {top:108px} 85.59% {top:108px} 85.6% {top:0px} 99.99% {top:0px} 100% {top:18px} } @keyframes div3 { 0% {top:36px} 14.19% {top:36px} 14.2% {top:54px} 28.49% {top:54px} 28.5% {top:72px} 42.79% {top:72px} 42.8% {top:90px} 57.09% {top:90px} 57.1% {top:108px} 71.39% {top:108px} 71.4% {top:0px} 85.59% {top:0px} 85.6% {top:18px} 99.99% {top:18px} 100% {top:36px} } @keyframes div4 { 0% {top:54px} 14.19% {top:54px} 14.2% {top:72px} 28.49% {top:72px} 28.5% {top:90px} 42.79% {top:90px} 42.8% {top:108px} 57.09% {top:108px} 57.1% {top:0px} 71.39% {top:0px} 71.4% {top:18px} 85.59% {top:18px} 85.6% {top:36px} 99.99% {top:36px} 100% {top:54px} } @keyframes div5 { 0% {top:72px} 14.19% {top:72px} 14.2% {top:90px} 28.49% {top:90px} 28.5% {top:108px} 42.79% {top:108px} 42.8% {top:0px} 57.09% {top:0px} 57.1% {top:18px} 71.39% {top:18px} 71.4% {top:36px} 85.59% {top:36px} 85.6% {top:54px} 99.99% {top:54px} 100% {top:72px} } @keyframes div6 { 0% {top:90px} 14.19% {top:90px} 14.2% {top:108px} 28.49% {top:108px} 28.5% {top:0px} 42.79% {top:0px} 42.8% {top:18px} 57.09% {top:18px} 57.1% {top:36px} 71.39% {top:36px} 71.4% {top:54px} 85.59% {top:54px} 85.6% {top:72px} 99.99% {top:72px} 100% {top:90px} } @keyframes div7 { 0% {top:108px} 14.19% {top:108px} 14.2% {top:0px} 28.49% {top:0px} 28.5% {top:18px} 42.79% {top:18px} 42.8% {top:36px} 57.09% {top:36px} 57.1% {top:54px} 71.39% {top:54px} 71.4% {top:72px} 85.59% {top:72px} 85.6% {top:90px} 99.99% {top:90px} 100% {top:108px} }

 <div class="container"> <div class="content"> <div class="div1">jQuery</div> <div class="div2">Script</div> <div class="div3">Net</div> <div class="div4">AngularJS</div> <div class="div5">ReactJS</div> <div class="div6">VueJS</div> <div class="div7">React Native</div> </div> </div>