Clickイベントでパネルに折りたたんでエフェクトを適用する方法

Question

親愛なるすべて私のWebページ内に複数のASPパネルがあり、ページの読み込み時にvisible = falseに設定され、特定のリンクボタンがクリックされたときに開く私はそれにゆっくりとした動き効果を与えたり、それに応じて崩壊させたり、効果を広げたりしたい。誰でも自分の経験を共有してください。

protected void LinkButton3_Click(object sender, EventArgs e) 
{ 
    pnlWall.Visible = true; 
    pnlShareHome.Visible = false; 
} 

Answer 1

あなたは（ちょうど<div>'s HTMLである）パネルを表示し、非表示にするjQueryのを使用することができます。それは可能性をスライドさせ、サーバーへの往復を節約します。あなたが原因Panel1内のコンテンツのポストバックを行う必要がある場合に行うとき

<asp:Panel ID="Panel1" runat="server" style="display: none;"> 
    content 
</asp:Panel> 

<input type="button" value="Slide Panel" onclick="slidePanel('<%= Panel1.ClientID %>')" /> 

<script type="text/javascript"> 
    function slidePanel(div) { 
     if ($('#' + div).css('display') == 'none') { 
      $('#' + div).slideDown('medium', function() { }); 
     } else { 
      $('#' + div).slideUp('medium', function() { }); 
     } 
    } 
</script> 

はしかし、あなたはslidePanel関数を呼び出すことができます。

protected void Button1_Click(object sender, EventArgs e) 
{ 
    Panel1.Visible = true; 

    //set the dom visibility to none 
    Panel1.Attributes.Add("style", "display:none"); 

    //call the function to slide the panel open 
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "slidePanel", "slidePanel('" + Panel1.ClientID + "')", true); 

    //or with a 1 second delay (1000 ms) 
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "slidePanel", "setTimeout(function() { slidePanel('" + Panel1.ClientID + "'); }, 1000);", true); 
}