0

これは非常に単純であると思われますが、正常に機能させることができません。

次のコードは、次のことができるはずです。ページの読み込みが完了するとすぐに、ページの上部にある div (div#panel) が下にスクロールして表示されます。数秒遅れると、div がスクロールして表示されなくなります。ユーザーがトリガーをクリックすると、div は上下にトグル/スライドできる必要があります。

アドバイス/提案をよろしくお願いします。

$(document).ready(function() {

    $("div#panel").slideDown("slow");
    setTimeout(function(){ 
    $("div#panel").slideUp("slow"); 
    }, 5000);

});

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");
    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });         
});
4

3 に答える 3

5

hide()スライドして表示できるように、最初にパネルに移動する必要があります。

$(document).ready(function(){
    $("div#panel").hide();

    var autoTimer = null;

    autoTimer = setTimeout(function(){
        $("div#panel").slideDown("slow");
        autoTimer = setTimeout(function(){
            $("div#panel").slideUp("slow");
        }, 5000);
    },2000);

    $("#open").click(function(){
        $("div#panel").slideDown("slow");
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });

    $("#close").click(function(){
        $("div#panel").slideUp("slow");
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });         
});

デモ: http://jsfiddle.net/X9Vn4/6/

于 2011-05-04T09:31:00.877 に答える
3

これを試すこともできます。slideDown の実行が完了したら、slideUp を読み込みます。

$('#id').slideDown(500, function(){
   setTimeout(function(){$('#id').fadeOut(500)}, 1500);
});
于 2012-05-06T07:11:57.763 に答える
0 
Try this :
$(document).ready(function(){
   setTimeout('slide_div()',5000);
  $('#open').click(function(){
      $('#pane1').slideDown('slow');
  });

  $('#close').click(function(){
      $('#pane1').slideUp('slow');
  });
});

function slide_div()
{
   $('#pane1').slideToggle();
 }
于 2011-05-04T09:31:39.610 に答える