0

私は正常に動作し、3秒ごとにdivを回転させる次のコードを持っています

var $elements = $('#One, #Two, #Three, #Four');
function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(1000);
            anim_loop((index + 1) % $elements.length);
        }, 3000);
    });
}
anim_loop(0);

ラジオボタンでループを制御する場合、どうすればループを制御できますか?

この例を参照してくださいhttp://jsfiddle.net/w5YHY/1/

ループを継続したいのですが、3 番目のラジオをクリックすると、3 番目の要素 #three が表示され、4 からループが継続するはずです。同様に 1 番目のラジオをクリックすると、#One が表示され、2 番目の要素からループが開始されます。

4

1 に答える 1

0

クリック イベントを使用してループを停止し、選択したラジオに基づいて新しいインデックスでループを再開できます。

これが私のフィドルです

最初に、タイムアウトを変数に設定して、クリックイベントでクリアできるようにしました。

var animLoop; // declared outside the function

animLoop = setTimeout(function() { // set in the function

次の行を変更しました。

$self.fadeOut(1000);

これにより、新しいループを呼び出すときに div のフェードアウトが正しく行われるようになります。

$("div").fadeOut(1000);

次に、ラジオのクリック イベントで、div の正しいインデックスに対応するように設定したラジオの ID を取得し、それを新しい anim_loop に渡します。これがあなたが探していたものであることを願っています。

以下は、フィドルに基づくコードです。

    var $elements = $('#One, #Two, #Three, #Four');
var animLoop;
function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        $("#"+(index)).prop("checked", true);
        animLoop = setTimeout(function() {
            $("div").fadeOut(1000);
            //$self.fadeOut(1000);
            anim_loop((index + 1) % $elements.length);
            $("input").prop("checked", false);
            $("#"+(index +1)).prop("checked", true);
        }, 3000);
    });
}

anim_loop(0); // start with the first element
$("input").click(function()
{
  $("div").fadeOut();
  clearTimeout(animLoop);
  anim_loop(parseFloat($(this).attr("id")));    
});
于 2013-11-12T16:53:31.797 に答える