Как анимировать элемент div сверху вниз, используя jQuery?

Question

Мне трудно переместить элемент div в l oop вверх-вниз, как по часовой стрелке. В принципе, я хочу, чтобы при загрузке страницы 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>