gpt4 book ai didi

javascript - 如何使用 jquery 为无限循环设置动画?

转载 作者:行者123 更新时间:2023-11-29 17:54:29 26 4
gpt4 key购买 nike

我一直在尝试使用 jquery animate 来制作运行文本。但我似乎无法让它无限循环运行。它总是只运行一次..

/*  js:  */

$(document).ready(function(){
function scroll() {
$('.scroll').animate({
right: $(document).width()
}, 8000, scroll);
}
scroll();
});
/* css: */

.scroll {
position: absolute;
right: -200px;
width: 200px;
}
<!-- html: -->

<div class="scroll">This text be scrollin'!</div>

这是演示: https://jsfiddle.net/y9hvr9fa/1/

你们知道怎么解决吗?

最佳答案

这就是我所做的:

  1. 预先计算$(document).width()就好像出现水平滚动,宽度会在下一次迭代中改变

  2. 删除您为 scroll 设置的 width 以便宽度仅与内容一样长 - 您将不得不给 white -space:nowrap 使文本保持在一行中。

  3. animate 中,使用 $('.scroll').outerWidth()scroll 文本的宽度/p>

请参阅下面的演示和 update fiddle here

$(document).ready(function() {

// initialize
var $width = $(document).width();
var $scrollWidth = $('.scroll').outerWidth();
$('.scroll').css({'right': -$scrollWidth + 'px'});

// animate
function scroll() {
$('.scroll').animate({
right: $width
}, 8000, 'linear', function() {
$('.scroll').css({'right': -$scrollWidth + 'px'});
scroll();
});
}
scroll();
});
body {
overflow: hidden;
}
.scroll {
position: absolute;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">This text be scrollin'!</div>

让我知道您对此的反馈,谢谢!

关于javascript - 如何使用 jquery 为无限循环设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40540217/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com