循环格动画

Question

我试图让一个div不断动画：

$(document).ready(function() { 
 
    function arrowmovement() { 
 
    setTimeout(function() { 
 
     $("#downarrowimg").animate({ 
 
     'margin-top': "-=30px" 
 
     }); 
 
    }, 500); 
 
    setTimeout(function() { 
 
     $("#downarrowimg").animate({ 
 
     'margin-top': "+=30px" 
 
     }); 
 
    }, 500); 
 
    } 
 
    arrowmovement(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="downarrow"> 
 
    <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"> 
 
</div>

它只运行一次。我做错了什么，如何解决？

Answer 1

这里是一个纯CSS的解决方案，它连续动画#downarrow：

@keyframes downarrowanimation { 
 
    0% {margin-top: 30px;} 
 
    50% {margin-top: -30px;} 
 
    100% {margin-top: 30px;} 
 
} 
 

 
#downarrow { 
 
    animation: downarrowanimation 1s ease-in-out infinite; 
 
}

<div id="downarrow"> 
 
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"> 
 
</div>

Answer 2

jQuery在动画方面真的很糟糕。 Greensock动画软件包（GSAP）是一个梦幻般的轻量级动画库，您可以改为查看。

TweenMax.to($("div"), .5, {y: "+=50", ease: Linear.easeNone, yoyo: true, repeat: -1});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script> 
 
<div style="width: 50px; height: 50px; background-color: red;"></div>

一号线做了所有你需要的。如果您想要更复杂的缓动，请使用TimelineMax类链接动画。

var timeline = new TimelineMax({repeat: -1}); 
 
timeline.to($("div"), .5, {y: "+=50", ease: Power2.easeOut}); 
 
timeline.to($("div"), .5, {y: "-=50", ease: Power2.easeOut});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script> 
 
<div style="width: 50px; height: 50px; background-color: red;"></div>

Answer 3

你可以只调用arrowmovement功能在每个动画的结尾：

function arrowmovement(direction) { 
    $("#downarrowimg").animate({ 
     'margin-top': "+="+ (30 * direction) +"px" 
    }, 500, function() { 
     arrowmovement(direction * -1); 
    }); 
} 

$(document).ready(function() { 
    arrowmovement(1); 
}); 

演示：https://jsfiddle.net/louisbros/dhwoejon/

Answer 4

你需要使用的setInterval（）。

$(document).ready(function() { 
 
    var repeatIt = setInterval(arrowmovement, 1000); 
 
    function arrowmovement() { 
 
    setTimeout(function() { 
 
     $("#downarrowimg").animate({ 
 
     'margin-top': "-=30px" 
 
     }); 
 
    }, 500); 
 
    setTimeout(function() { 
 
     $("#downarrowimg").animate({ 
 
     'margin-top': "+=30px" 
 
     }); 
 
    }, 500); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="downarrow"> 
 
    <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"> 
 
</div>

一套它在一个变种，所以你可以阻止它：

function abortTimer() { // to be called when you want to stop the timer 
    clearInterval(repeatIt); 
} 

Answer 5

有几种方法可以做到这一点，我建议使用setInterval()，波纹管检查例子。

希望这会有所帮助。

---

var down=true; 
 

 
setInterval(function() { 
 
    if(down){ 
 
     $("#downarrowimg").animate({ 
 
     'margin-top' : "-=30px" 
 
     }, function() { 
 
     down=false; 
 
     }); 
 
    }else{ 
 
    $("#downarrowimg").animate({ 
 
     'margin-top' : "+=30px" 
 
    }, function() { 
 
     down=true; 
 
    }); 
 
    } 
 
},500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="downarrow"> 
 
    <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"> 
 
</div>

Answer 6

你为什么不只是使用CSS？ GPU加速的动画带来的额外好处让您获得所有的好处。

@keyframes bounce { 
 
    from {margin-top: 30px;} 
 
    to {margin-top: -30px;} 
 
} 
 

 
.arrow { 
 
    animation-name: bounce; 
 
    animation-duration: 1s; 
 
    animation-direction: alternate; 
 
    animation-iteration-count: infinite; 
 
}

<div id="downarrow"> 
 
     <img class="arrow" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"> 
 
    </div>

Answer 7

你可以用动画的方法的完整功能，你不这样做真的需要在这里暂停。
像纯粹的CSS动画Rounin建议也是一个选项。

.animate()

完整 类型：Function（） 要调用的函数一旦动画完成，称为每一个匹配元素一次。

这里是一个例子。

$(document).ready(function() { 
 
    function arrowmovement() { 
 
     var d = ($("#downarrowimg").css('margin-top') === "-30px") ? "+" : "-"; 
 
     $("#downarrowimg").animate({ 
 
      'margin-top' : d + "=30px" 
 
     }, 500, // duration 
 
\t function() { // complete fn 
 
      arrowmovement(); 
 
     }); 
 
    } 
 
    arrowmovement(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="downarrow"> 
 
    <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"> 
 
</div>

Answer 8

$(document).ready(function() { 
 
    function arrowUp() { 
 
    $("#downarrowing").animate(
 
    \t {'margin-top': "-=30px"}, 600, function(){arrowDown()}); 
 
    } 
 

 
    function arrowDown() { 
 
    \t $("#downarrowing").animate(
 
    \t {'margin-top': "+=30px"}, 600, function(){arrowUp()}); 
 
    } 
 
\t arrowUp(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img id="downarrowing" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"> 
 
</div>

Answer 9

这很容易理解。

$(document).ready(function (argument) { 
    var operator = '-'; 
    setInterval(arrowMovement,500); 
    function arrowMovement() { 
     if(operator == '-') { 
      operator = '+' 
     } else { 
      operator = '-' 
     } 

     $('#downarrow').animate({'margin-top':operator+10}, 500); 
    } 
});