html - 在jquery使用setInterval讓齒輪循環滾動

Question

有一齒輪，現在做的動畫是，滑鼠懸浮時才會觸發滾動事件， 想做的動畫是，頁面載入完成後，隔一段時間齒輪會自己滾出去再滾回來。向右滾動和向左滾動都能實現，但是不知道jquery中怎麼寫“隔一段時間+滾出去再滾回...

仅有的幸福 · Answer

滿天的星座 · Answer

隔一段時間使用setInterval函數：

setInterval(function(){
    滚出去再滚回来();
},一段时间);

高洛峰 · Answer

方法一：純CSS 實現
給兩個齒輪添加向左滾和向右滾的樣式
html


  
Running right


  
Running left

在樣式裡添加了無限循環滾動的動畫。
如果需要滾出去隔一會再回來，可以把translate(-1000px)的值增大，例如 2000px，根據需求自己控制。
translate 的值增加後，需要回應的增大 rotate 的值，也是根據需求自己調節就行了。
css

#wheel1, #wheel2{
  width: 150px;
  height: 150px;
  background-color: pink;
  border:5px dotted purple;
  border-radius: 80px;
  position: absolute;
}
#wheel1{
  right: 0;
}
p{
  font-size: 25px;
  color: white;
  margin: 30px;
}
.roll-left{
  animation: roll-left 6s linear infinite; // 给动画添加 infinite 值，让动画无限循环
  -webkit-animation-direction:alternate; // 反向执行动画
  animation-direction:alternate;
}
.roll-right{
  animation: roll-right 6s linear infinite;
  -webkit-animation-direction:alternate;
  animation-direction:alternate;
}
@keyframes roll-left{
  from{}
  to {transform: translate(-1000px) rotate(-720deg)}
}

@keyframes roll-right{
  from{}
  to{transform: translate(1000px) rotate(720deg)}
}

方法二：使用jquery 控制
如果想用 jquery 控制的話，css　需要修改一下

.roll-left{
  animation: roll-left 8s linear;
}
.roll-right{
  animation: roll-right 8s linear;
}
@keyframes roll-left{
  0% {}
  50% {transform: translate(-1000px) rotate(-720deg)}
  100% {}
}
@keyframes roll-right{
  0% {}
  50% {transform: translate(1000px) rotate(720deg)}
  100% {}
}

js

setInterval(function(){
  $('#wheel1').addClass('roll-left').one('animationend', function() { // 每次动画完成后移除样式
    $('#wheel1').removeClass('roll-left');
  });
}, 2000); // 通过修改这个数值去控制每隔多久执行一次