如何无限重复 jQuery 动画

发布于 2024-11-09 07:42:47 字数 803 浏览 0 评论 0原文

我怎样才能让这个动画无限重复:

$(window).load(function () {

$("#ani-image").fadeIn(600, function () {
$("#ani-bluescreen").fadeIn(300);
$("#ani-text").fadeIn(300);
$("#ani-text").animate({ marginLeft: "400px",}, 400 );  
});  

var delay = 5000;

$("#ani-bg").delay(delay).fadeIn(1000, function () {
$("#ani-image-2").fadeIn(300); 
$("#ani-bluescreen-2").fadeIn(300); 
$("#ani-text-2").fadeIn(300);
$("#ani-text-2").animate({ marginLeft: "400px",}, 400 );
});

var delay = 10000;

$("#ani-bg-2").delay(delay).fadeIn(1000, function () {
$("#ani-image-3").fadeIn(300);
$("#ani-bluescreen-3").fadeIn(300);       
$("#ani-text-3").fadeIn(300);
$("#ani-text-3").animate({ marginLeft: "400px",}, 400 );
});

var delay = 15000;

$("#ani-bg-3").delay(delay).fadeIn(1000, function () {
});
});

How can I get this animation to repeat infinitely:

$(window).load(function () {

$("#ani-image").fadeIn(600, function () {
$("#ani-bluescreen").fadeIn(300);
$("#ani-text").fadeIn(300);
$("#ani-text").animate({ marginLeft: "400px",}, 400 );  
});  

var delay = 5000;

$("#ani-bg").delay(delay).fadeIn(1000, function () {
$("#ani-image-2").fadeIn(300); 
$("#ani-bluescreen-2").fadeIn(300); 
$("#ani-text-2").fadeIn(300);
$("#ani-text-2").animate({ marginLeft: "400px",}, 400 );
});

var delay = 10000;

$("#ani-bg-2").delay(delay).fadeIn(1000, function () {
$("#ani-image-3").fadeIn(300);
$("#ani-bluescreen-3").fadeIn(300);       
$("#ani-text-3").fadeIn(300);
$("#ani-text-3").animate({ marginLeft: "400px",}, 400 );
});

var delay = 15000;

$("#ani-bg-3").delay(delay).fadeIn(1000, function () {
});
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

陈甜 2024-11-16 07:42:47

来自 http://plugins.jquery.com/project/timers

everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])

每次都会添加定义的
函数 (fn) 作为定时事件运行
在给定的时间间隔(间隔)
对于给定的次数(次)。
如果times设置为0,则次数
该方法被调用的次数是
无界。还设置了一个标签
给定时事件
提供的字符串(标签)或
区间的字符串表示
假如。另外,间隔
可以通过使用这样的字符串来定义
“3s”表示 3 秒。

From http://plugins.jquery.com/project/timers

everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])

everyTime will add the defined
function (fn) as a timed event to run
at a given time interval (interval)
for a given number of times (times).
If times is set to 0, the number of
times the method is called is
unbounded. A label is also set for the
given timed event either to the
provided string (label) or to the
string representation of the interval
provided. Additionally, the interval
can be defined by using a string such
as "3s" for 3 seconds.

浮萍、无处依 2024-11-16 07:42:47

将其全部包装在 setInterval 中:

setInterval(function () {
  $("#ani-image").fadeIn(600, function () {
    $("#ani-bluescreen").fadeIn(300);
    $("#ani-text").fadeIn(300);
    $("#ani-text").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 5000;

  $("#ani-bg").delay(delay).fadeIn(1000, function () {
    $("#ani-image-2").fadeIn(300);
    $("#ani-bluescreen-2").fadeIn(300);
    $("#ani-text-2").fadeIn(300);
    $("#ani-text-2").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 10000;

  $("#ani-bg-2").delay(delay).fadeIn(1000, function () {
    $("#ani-image-3").fadeIn(300);
    $("#ani-bluescreen-3").fadeIn(300);
    $("#ani-text-3").fadeIn(300);
    $("#ani-text-3").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 15000;

  $("#ani-bg-3").delay(delay).fadeIn(1000, function () {});
}, 5000); // 5 seconds

Wrap it all in a setInterval:

setInterval(function () {
  $("#ani-image").fadeIn(600, function () {
    $("#ani-bluescreen").fadeIn(300);
    $("#ani-text").fadeIn(300);
    $("#ani-text").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 5000;

  $("#ani-bg").delay(delay).fadeIn(1000, function () {
    $("#ani-image-2").fadeIn(300);
    $("#ani-bluescreen-2").fadeIn(300);
    $("#ani-text-2").fadeIn(300);
    $("#ani-text-2").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 10000;

  $("#ani-bg-2").delay(delay).fadeIn(1000, function () {
    $("#ani-image-3").fadeIn(300);
    $("#ani-bluescreen-3").fadeIn(300);
    $("#ani-text-3").fadeIn(300);
    $("#ani-text-3").animate({
      marginLeft: "400px",
    }, 400);
  });

  var delay = 15000;

  $("#ani-bg-3").delay(delay).fadeIn(1000, function () {});
}, 5000); // 5 seconds
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文