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); // 通过修改这个数值去控制每隔多久执行一次