1

一度に 1 つだけが表示されるように、2 つの div を交互にフェードイン/フェードアウトさせるにはどうすればよいですか? そして、それを終わりのないループにしますか？

前もって感謝します！！

.fadeOut と .fadeIn を使用して行う必要があることはわかっていますが、何度もループさせる方法がわかりません。

4

3 に答える 3

6

これが私自身のバージョンのフィドルです

http://jsfiddle.net/3KydB/

window.switchIn = function () {
    $('.red').fadeToggle(function() {
        $('.blue').fadeToggle(function() {
            setTimeout(function() {window.switchOut();}, 500);
        });
    });

}

window.switchOut = function () {
    $('.blue').fadeToggle(function() {
        $('.red').fadeToggle(function() {
            setTimeout(function() {window.switchIn();}, 500);
        });
    });

}

setTimeout(function() {window.switchIn();}, 500)
于 2013-01-29T18:49:58.717 に答える
3

fadeToggleどちらのDIVも同時に表示したくないので、質問の解決策は単純なものよりも少し注意が必要です。重要なのは、フェードアクションを連鎖させることです。これにより、次のフェードアクションは、前のフェードアクションが完了するまで実行されません。

論理的には、次のようにします。DIV1フェードイン、DIV1フェードアウト、DIV2フェードイン、DIV2フェードアウト、繰り返し。

以下の私の解決策は、ページ上の任意の2つの要素を取り、どちらかを同時に表示せずにそれらの可視性を振動させます。iDuration各遷移の時間をミリ秒単位で指定します。

実例

HTML：

<div id="div1" style="display:none;">DIV #1</div>
<div id="div2" style="display:none;">DIV #2</div>

JavaScript：

function runToggle(iDuration, domFirst,domSecond) {
        $(domFirst).fadeToggle(iDuration, "linear",function() {
          $(domFirst).fadeToggle(iDuration, "linear",function() {
            $(domSecond).fadeToggle(iDuration,"linear",function() {
              $(domSecond).fadeToggle(iDuration,"linear",function() {
                  setTimeout(function() {
                      runToggle(domFirst,domSecond) ;
                  },50);
              });
            }); 
          });
       }); 
};

runToggle(1000, $('#div1'),$('#div2'));

私はsetTimeoutタイミングの目的ではなく、JavaScriptインタープリターを解放して、このフェードループの実行中にブラウザーが他のことを実行できるようにするために使用します。

于 2013-01-29T19:03:15.267 に答える
0

お元気ですか、あなたはこれを行うことができます。

setInterval() - 指定された時間間隔で関数を何度も実行します。

setInterval(コード、ミリ秒、言語)

したがって、それを作成する関数を作成できます。例

<div id="one" style="display:none;"></div>
<div id="two"></div>
<script>
$(function(){
setInterval(function(){MakeToggleDivs();},1000);
});
function MakeToggleDivs(){
$('#one').fadeToggle(400);
$('#two').fadeToggle(400);
}
</script>

そして、これは動作する必要があります。動作しない場合は教えてください。

幸運を！

于 2013-01-29T18:47:41.550 に答える