2

特定の時間、たとえば 10 秒または 15 秒後に自動的に非表示div1および表示するコードが必要です。 私はこの投稿を読みました: jQueryを使用して、特定の時間間隔で div を表示および非表示にします。div2

しかし、それは10秒ごとに繰り返されます。div1一度非表示にして表示する必要がありdiv2ます。

4

4 に答える 4

6

divにID"div1"と"div2"があり、それ"div1"が"div2"最初は表示され、最初は非表示になっているとすると、次のようにxミリ秒後に最初の部分を非表示にして2番目の部分を表示できます。

$("#div1").delay(10000).hide(0, function() {
    $("#div2").show();
});

必要に応じて、 andの代わりに.fadeOut()and.fadeIn()または他のアニメーションメソッドを使用できます。.hide().show()

これを自動的に実行する場合は、上記のコードをドキュメントレディハンドラー内に配置します。クリックハンドラーなど、ユーザーの操作に応答する場合は、このコードを配置します。

デモ： http： //jsfiddle.net/s7NXz/

3つ以上のdivがあり、次のようなことができるようになったら、それらを1回だけ循環させたい場合。

var $divs = $("div").hide(),    // use an appropriate selector here
    current = 0;

$divs.eq(0).show();             // show the first

function showNext() {
    if (current < $divs.length - 1) { // if not past the end then
        $divs.eq(current).delay(2000).fadeOut('fast', function() {
            current++;
            $divs.eq(current).fadeIn('fast');
            showNext();
        });
    }
}
showNext();

デモ： http： //jsfiddle.net/s7NXz/1/

于 2012-11-29T04:44:47.853 に答える
0 
$('html').addClass('js');

$(function() {

  var timer = setTimeout( showDiv, 5000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('div','#container')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 3? counter = 0 : counter++; 

  }

});

setInterval の代わりに setTimeout を使用する

于 2012-11-29T04:10:17.767 に答える