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

問題描述

有一齒輪，現在做的動畫是，鼠標懸浮時才會觸發滾動事件，

想做的動畫是，頁面加載完成后，隔一段時間齒輪會自己滾出去再滾回來。向右滾動和向左滾動都能實現，但是不知道jquery中怎么寫“隔一段時間+滾出去再滾回來”

html:

<p id='wheel1'> <p>Running right</p></p><p id = 'wheel2'> <p>Running left</p></p>

css:

<style type='text/css'> #wheel1{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px;float: right; } #wheel2{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px; } #wheel2:hover{transform: translate(1000px) rotate(720deg);transition: transform 8s ease; } #wheel1:hover{transform: translate(-500px) rotate(-720deg);transition: transform 8s ease; } p{font-size: 25px;color: white;margin: 30px; }

問題解答

//到時見的時候#wheel1{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px;float: right;animation: myrotate2 8s ease forwards; } #wheel2{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px;animation: myrotate1 8s ease forwards; } @keyframes myrotate1{from{transform: translate(0px) rotate(0deg);}to{transform: translate(1000px) rotate(720deg)} } @keyframes myrotate2{from{transform: translate(0px) rotate(0deg);}to{transform: translate(-500px) rotate(-720deg)}} p{font-size: 25px;color: white;margin: 30px; }回答2：

隔一段時間使用setInterval函數：

setInterval(function(){ 滾出去再滾回來();},一段時間);回答3：

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

<p class='roll-left'> <p>Running right</p></p><p class='roll-right'> <p>Running left</p></p>

在樣式里添加了無限循環滾動的動畫。如果需要滾出去隔一會再回來，可以把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); // 通過修改這個數值去控制每隔多久執行一次