我如何循环这个动画下去？ [英] How do I loop this animation indefinitely?

问题描述

我有点新的jQuery，我设法编程小动画渐渐消逝在和淡出两张图片。

我现在的问题是，它已经轮循环后，它只是停止。我需要它，当它到达终点从头重新开始。它应该只是继续。

这里的code

  $（文件）。就绪（函数（）{
    $（'img.banner1'）淡出（5000）。
    $（'img.banner2'）延迟（1000）.fadeIn（5000）;
    $（'img.banner2'）延迟（1000）.fadeOut（5000）;
    $（'img.banner1'）淡入（5000）.delay（1000）;
}）;
 

解决方案

这code之后开始最后的淡入后1000毫秒延迟将重新启动的功能。你可能想不过既然你把5000毫秒较长的​​延迟褪色的旗帜...

 函数animateBanners（）{
    $（'img.banner1'）淡出（5000）。
    $（'img.banner2'）延迟（1000）.fadeIn（5000）;
    $（'img.banner2'）延迟（1000）.fadeOut（5000）;
    $（'img.banner1'）淡入（5000）.delay（1000）.queue（animateBanners）。
}$（文件）。就绪（函数（）{
    animateBanners（）;
}）;
 

I'm kinda new to jquery and I managed to program a small animation which fades in and fades out two pictures.

My problem now is that after it has gone round the cycle, it just stops. I need it to start from the beginning again when it reaches the end. It should just continue.

Here's the code

$(document).ready(function() {
    $('img.banner1').fadeOut(5000);
    $('img.banner2').delay(1000).fadeIn(5000);
    $('img.banner2').delay(1000).fadeOut(5000);
    $('img.banner1').fadeIn(5000).delay(1000);
});

解决方案

This code will restart the function after the 1000ms delay after starting the final fadeIn. You might want a longer delay though since you take 5000ms to fade that banner in...

function animateBanners() {
    $('img.banner1').fadeOut(5000);
    $('img.banner2').delay(1000).fadeIn(5000);
    $('img.banner2').delay(1000).fadeOut(5000);
    $('img.banner1').fadeIn(5000).delay(1000).queue(animateBanners);
}

$(document).ready(function() {
    animateBanners();
});

这篇关于我如何循环这个动画下去？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！