Javascript 如何在 jQuery 中连续循环动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6767286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I loop an animation continuously in jQuery?
提问by user830593
I need to know how to infinitely loop this animation. It is a text scroll animation and I need it to repeat after it's finished.
我需要知道如何无限循环这个动画。这是一个文本滚动动画，完成后我需要它重复。
Here is the jQuery:
这是jQuery：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".boxtext").ready(function(){
$(".boxtext").animate({bottom:"600px"},50000);
});
});
</script>
Here is the CSS for ".boxtext"
这是“.boxtext”的CSS
.boxtext {
position:absolute;
bottom:-300px;
width:470px;
height:310px;
font-size:25px;
font-family:trajan pro;
color:white;
}
回答by doctorless
Make it a function and have it call itself as a callback:
使它成为一个函数并让它作为回调调用自己：
$(document).ready(function(){
scroll();
}
function scroll() {
$(".boxtext").css("bottom", "-300px");
$(".boxtext").animate({bottom:"600px"}, 50000, scroll);
}
Keep in mind, this won't be very fluid.
请记住，这不会很流畅。
EDIT: I wasn't thinking earlier. My mistake.
编辑：我没想到更早。我的错。
回答by Yi?it Yener
Following should work.
以下应该有效。
$(document).ready(function(){
animateTheBox();
});
function animateTheBox() {
$(".boxtext").animate({bottom:"600px"}, 50000, animateTheBox);
}
回答by saad arshad
probably the simplest solution.
可能是最简单的解决方案。
var movement1 = function(speed){
$(".mydiv").animate({"top": "100px"}, speed,function(){
movement2(speed)
});
}
var movement2 = function(speed){
$(".mydiv").animate({"top": "120px"}, speed,function(){
movement1(speed)
});
}
movement1(1000);
this is eventually call each other infinitely.
这最终是无限地互相呼唤。
回答by Felipe
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
move();
});
function move(){
$(".boxtext").ready(function(){
$(".boxtext").animate({bottom:"600px"},50000,function(){
$(".boxtext").css({"bottom":0}, move););
});move();
});
</script>
回答by Ganpat Kakar
Please try this for continuous loop animation on hover.
请在悬停时尝试连续循环动画。
function loopl(){
$('.mCSB_container').animate({ "left": "+=80px" }, "800", 'linear', loopl );
}
function loopr(){
$('.mCSB_container').animate({ "left": "-=80px" }, "800", 'linear', loopr );
}
function stop(){
$('.mCSB_container').stop();
}
$( "#left" ).hover(loopl, stop);
$( "#right" ).hover(loopr, stop);
回答by jantocv
yourloop = setInterval(function() {
// tasks
}, timeInMilliseconds );
Enjoy!
享受！
回答by Headache
Use setInterval. This way you can repeat a function infinitely after a certain interval, such as every second.
使用setInterval。通过这种方式，您可以在某个时间间隔（例如每秒）后无限重复执行一个函数。
回答by UNKNOWN
<script type="text/javascript">
var e = document.getElementByClassName('boxtext')[0].style.bottom;
function reset(){
if(e === "599px"){e === 0 + "px"}
else{b += 1000}
}
setInterval(reset(),1);
$(document).ready(function(){
$(".boxtext").ready(function(){
$(".boxtext").animate({bottom:"600px"},b);
});
});
</script>
idont no but i think should have used javascript
不，但我认为应该使用 javascript
回答by uedaka
Like this:
像这样：
<script>
$(document).ready(function()
{
$(window).load(function()
{
var a="#bijin"
var x=1000
var y=1000
for (var i=1 ; i<=100000 ; i++){
$(a).slideUp(x).slideDown(y);
}
});
});
</script>
Example: http://www.hpcreating.com/effect/jquery2/slide4.html
