即使调用函数,jQuery 动画循环也不起作用

标签 jquery function loops

我有这个代码:

HTML:

<div class="rotatingbg"> 
      <div id="bg1"></div>
</div>

jQuery:

function animatebg() {
   $('#bg1').animate({left:'-4500px'}, 25000, 'linear', animatebg);
}

但是,即使我在函数内调用该函数,动画也只会运行一次,并且不会无限循环。

缺少或不正确的内容是什么?

最佳答案

您需要有一个反动画,将元素重置回其原始位置,否则一旦您的元素达到 -4500px,它就会以动画方式将元素移动到完全相同的位置,这将不会产生任何视觉变化。

这是一个具有两个动画的示例 - 一个向前动画,一个向后动画:

function animatebg() {
   $('#bg1').animate({left:'100px'}, 2500, 'linear', animateback);
}

function animateback() {
   $('#bg1').animate({left:'0px'}, 2500, 'linear', animatebg);
}

animatebg();
#bg1 {
    background-color: black;
    width: 100px;
    height: 100px;
    position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotatingbg"> 
      <div id="bg1"></div>
</div>

JSFiddle 版本:https://jsfiddle.net/cqd3n5wL/

关于即使调用函数,jQuery 动画循环也不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32062504/

相关文章:

jquery - 使用 jQuery 在 DOM 中添加项目,无需更新浏览器滚动条

javascript - 根据第一行对齐方式设置表头对齐方式

javascript - D3 箭头标记表示目标 - 源流,而不是源 - 目标流

javascript - 从 html 调用函数内部的 JavaScript 函数

c++ - 编写一个程序,要求用户最多输入 10 个整数(可能更少);使用数组和 for 循环

ajax - jquery .when(f1, f2).then() 返回 f1 的对象数组,但返回 f2 的responseText。为什么?

c# - 创建用于获取变量值的函数

c++ - 从另一个类调用不同类的成员函数

arrays - 如何检查结构中是否存在值并将另一个值保存在数组中

linux - Until 循环 - 为什么它在条件为真时仍然有效