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 に答える