0

嗨，我有一组图像，一旦我需要无限循环，它们就会以不同的速度淡入。有人可以帮我写代码。这确实是基本的动画，但我发现的代码以相同的速度循环所有内容。谁能帮我把这个动画放到一个循环中，它会产生同样的淡入淡出效果，但会无限循环。谢谢

谢谢您的帮助。

<script>
$(document).ready(function anim() {
// fade in initial
$('#img-1').delay(0).fadeIn(500);;
$('#img-2').delay(0).fadeIn(500);
$('#txt-1').delay(0).fadeIn(500)
$('#txt-2').delay(0).fadeIn(500);
// move to set 2
$('#txt-1').delay(2000).fadeOut(500);
$('#txt-2').delay(2000).fadeOut(500);
$('#txt-3').delay(2000).fadeIn(500);
$('#txt-4').delay(2000).fadeIn(500);
$('#img-1').delay(5000).fadeOut(500);
$('#img-2').delay(5000).fadeOut(500);
$('#img-3').delay(5000).fadeIn(500);
$('#img-4').delay(5000).fadeIn(500);
// move to set 3
$('#txt-3').delay(8000).fadeOut(500);
$('#txt-4').delay(8000).fadeOut(500);
$('#txt-5').delay(8000).fadeIn(500);
$('#txt-6').delay(8000).fadeIn(500);
$('#img-3').delay(11000).fadeOut(500);
$('#img-4').delay(11000).fadeOut(500);
$('#img-5').delay(11000).fadeIn(500);
$('#img-6').delay(11000).fadeIn(500);
// move to set 4
$('#txt-5').delay(14000).fadeOut(500);
$('#txt-6').delay(14000).fadeOut(500);
$('#txt-7').delay(14000).fadeIn(500);
$('#txt-8').delay(14000).fadeIn(500);
$('#img-5').delay(17000).fadeOut(500);
$('#img-6').delay(17000).fadeOut(500);
$('#img-7').delay(17000).fadeIn(500);
$('#img-8').delay(17000).fadeIn(500);
});
</script>

<body>

<div id="home-right">

图片

</body>
4

1 回答 1

1

使用 setTimeout 进行一点递归应该可以工作。 

$.fn.loopFadeAnimation = function (delay, fadeType, duration) {
    var that = $(this);

    delay = delay || 0;
    duration = duration || 0;

    // call animation
    $(this).delay(delay)[fadeType](duration);

    // call loopFadeAnimation again with a setTimeout
    setTimeout(function () {
        var newFadeType = ('fadeIn' === fadeType)
            ? 'fadeOut'
            : 'fadeIn';
        $(that).loopFadeAnimation(delay, newFadeType, duration);
    }, delay + duration);

    return $(this); // for chaining
};

$('#img-1').loopFadeAnimation(0, 'fadeIn', 500); // etc.
于 2013-02-19T21:42:20.140 回答