0

関数全体をループで繰り返そうとしましたが、何も機能しません。Loop（）コールバックを試し、interval（）を設定しました。誰かが私を正しい方向に向けることができますか？

アニメーション全体を繰り返すための最良の方法は何でしょうか？ありがとう

$(document).ready(function() {
    $("#slide1").fadeIn(500, function() {
        $("#slide2").fadeIn(500, function() {
            $("#slide3").fadeIn(500, function() {
                $("#slide4").fadeIn(500, function() {
                    $("#slide5").fadeIn(500, function() {

                        $("#slide1").fadeOut(500, function() {

                            $("#slide6").fadeIn(500, function() {
                                $("#slide7").fadeIn(500, function() {
                                    $("#slide8").fadeIn(500, function() {
                                        $("#slide9").fadeIn(500, function() {});
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});
4

5 に答える 5

3

@Phillip質問にあるものはすべて機能します..コードを即興で作成したいだけです..それは正しいですか？– ベガ

こんにちはベガ。はい、コードはうまく機能しますが、発生したいと考えてい$("#slide1").fadeOut(500, function() {ます。ありがとう – フィリップ

以下のようなコードを変換すると、

デモ: http://jsfiddle.net/RuX5d/5/

$(document).ready(function() {
    var i = 1, dir = 1, curFx = 'fadeIn';
    var interval = setInterval(function () {
        if (i == 6 && $('#slide1').is(':visible')) {
            $('#slide1').fadeOut(500);             
            return;
        }

        $('#slide'+ i)[curFx](500);

        i = i + 1*dir;

        if (i == 10 || i == -1) {
            dir = (dir == 1)?-1:1;
            curFx = (curFx == 'fadeIn')?'fadeOut':'fadeIn';
        }        
    }, 500);
});

私はあなたが何を望んでいるのかよくわかりません..しかし、私はあなたが望んでいてfadeIn、fadeOut繰り返し満足していると信じています.

もしそうなら、私のデモと以下のコードを試してください。

デモ: http://jsfiddle.net/RuX5d/1/

$(document).ready(function() {
    var curSlide = 0, dir = 1;
    var curFx = 'fadeIn';
    setInterval(function () {
        curSlide += 1 * dir;
        $('#slide' + curSlide)[curFx](500);
        if (curSlide == 11 || curSlide == 0) {
            curFx = (curFx == 'fadeIn')?'fadeOut': 'fadeIn';
            dir = (dir == 1)?-1: 1;
        }
    }, 500);
});
于 2012-11-21T19:11:56.383 に答える
1

を使用しsetTimeoutます。IDKはこれをどのように正確に行いたいですか...しかし、次のようなものになる可能性があります:

var i = 1;
$(document).ready(function(){ 
  setTimeout(function(){ 
    var slide = '#slide' + i++;
    $(slide).fadeIn();}, 500); 
});
于 2012-11-21T19:05:04.287 に答える
0

あなたは再発する可能性があります。これが短いバージョンです：

function slider(count, asc) {
    var count = count || 1;
    if (!typeof(asc) == "boolean"||count == 10||count == 1) asc = !asc;
    $("#slide"+count)[asc?"fadeIn":"fadeOut"](500, (function() {
        return function() {
            slider(asc ? ++count : --count, asc);
        };
    })());
}
slider();

ここでそれを参照してください：http：//jsfiddle.net/K8pbS/1/

于 2012-11-21T19:07:29.610 に答える
0

これはあなたが探しているものを処理する必要があります

function fadeFn() {
    if (curNum < 10) {
        if (direction === 'Out') {
            direction = 'In';
            curNum++;
        }
        else {
            direction = 'Out';
        }
        $("#slide" + curNum)['fade' + direction](500, fadeFn);
    }
}

var curNum = 0;
var direction = 'Out';
$(document).ready(function() {
    fadeFn();
});
于 2012-11-21T19:04:53.230 に答える
0

このような関数は、あなたがしようとしていることを達成するはずです:

function fadeInRepeat(start, max){
    if(start++ < max){
        $("#slide" + start).fadeIn(500, function() {
            fadeInRepeat(start, max);
        }
    }
}

fadeInRepeat(1,10)元のコードを置き換えるために呼び出すだけです。

于 2012-11-21T19:06:25.500 に答える