如何使用Jquery将FadeIn和FadeOut效果应用于UpdatePanel内的DIV？
现在我的页面中有两个如何使用Jquery将FadeIn和FadeOut效果应用于UpdatePanel内的DIV？,jquery,asp.net,updatepanel,fadein,Jquery,Asp.net,Updatepanel,Fadein,现在我的页面中有两个DIV，用于演示Div1显示输入表单，Div2允许用户编辑输入的表单字段。两个Div都位于UpdatePanel中 以下是场景： --用户在Div1中输入详细信息，然后单击“继续”，即链接按钮。单击Div1Visible属性设置为False，Div2Visible设置为True --当Div2可见且用户单击编辑链接按钮上的，则Div1可见且Div2可见属性设置为False 以下是标记： <asp:Content ID="Content2" ContentPlaceHol
DIVDiv1Div2DivUpdatePanelDiv1“继续”链接按钮Div1VisibleFalseDiv2VisibleTrueDiv2且用户单击编辑链接按钮上的，则Div1
可见且Div2
可见属性设置为False
以下是标记：
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<script language="javascript" type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestDBR);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestDBR);
function InitEvent() {
$(document).on("click", "#ctl00_MainContent_lnkEditShipping", function() {
alert("hi");
//fadeIn(speed[milliseconds], easing[linear], callback)
$("#ctl00_MainContent_divShippingPanel").fadeIn(1500);
$("#ctl00_MainContent_divShippingConfirmPanel").fadeOut(2000);
// $("#ctl00_ContentPlaceHolder1_divShippingPanel").fadeOut(2000);
//return false;
});
}
function beginRequestDBR(sender, args) {
//some code here
}
function endRequestDBR(sender, args) {
//some code here
}
$(document).ready(InitEvent);
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divShippingPanel" runat="server">
<div style="margin-top: 10px;">
<table cellpadding="5" cellspacing="0" border="0">
<tr>
<td align="left">
<label>
First Name</label>
</td>
<td>
</td>
<td style="padding-left: 5px;">
<label>
Last Name</label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtSAFirstName" runat="server" Width="150"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="txtSAFirstName"
Display="Dynamic" ErrorMessage="Please enter First Name" Font-Bold="false" Font-Italic="false">*</asp:RequiredFieldValidator>
</td>
<td>
<asp:TextBox ID="txtSALastName" runat="server" Width="150"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtSALastName"
Display="Dynamic" ErrorMessage="Please enter Last Name" Font-Bold="false" Font-Italic="false">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="left">
<label>
Address Line 1</label>
</td>
<td>
</td>
<td style="padding-left: 5px;">
<label>
Address Line 2(optional)</label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtSAAdd1" runat="server" Width="150"></asp:TextBox>
</td>
<td>
</td>
<td>
<asp:TextBox ID="txtSAAdd2" runat="server" Width="150"></asp:TextBox>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0">
<tr>
<td align="left">
<label>
City</label>
</td>
<td style="padding-left: 5px;">
<label>
State</label>
</td>
<td style="padding-left: 5px;">
<label>
Zip Code</label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtSACity" runat="server" Width="150px"></asp:TextBox>
</td>
<td style="padding-left: 5px;">
<asp:DropDownList ID="drpSAState" class="drpSAState" runat="server" Width="175">
<asp:ListItem Value="">--</asp:ListItem>
<asp:ListItem Value="AL">Alabama</asp:ListItem>
</asp:DropDownList>
</td>
<td style="padding-left: 5px;">
<asp:TextBox ID="txtSAZIP" runat="server" Width="150"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<label>
Phone (optional)</label>
</td>
<td style="padding-left: 5px;">
<label>
Country</label>
</td>
<td style="padding-left: 5px;">
<label>
</label>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtSAPhone" runat="server" Width="150"></asp:TextBox>
</td>
<td>
<b>United States</b> We currently only support trades within the United States.
</td>
<td>
<label>
</label>
</td>
</tr>
</table>
</div>
<br />
<div style="padding-top: 10px; padding-bottom: 10px; text-align: left;">
<asp:LinkButton ID="lnkShippingPanel" runat="server" CssClass="button orange" OnClick="lnkContinue_Click"
OnClientClick="return ValidateInput();">Continue</asp:LinkButton>
</div>
</div>
<div id="divShippingConfirmPanel" visible="false" runat="server">
<h2 style="color: black; margin: 0 0 10px; font-weight: bold; font-size: medium;
margin-top: 20px;">
Please confirm your address</h2>
<p>
<h2 style="color: #888; margin: 0 0 10px;">
We verify all addresses to assure fast and accurate delivery.</h2>
<p>
</p>
<div style="font-size: 12px; font-weight: bold; color: #a73316; padding: 10px 0;">
<p>
This address is not recognized by the USPS. Are you sure you want to use it?</p>
<p>
Do the city, state, or ZIP code conflict?
</p>
<p>
Are there other major typos?</p>
</div>
<div>
<h2>
Your input</h2>
<p>
<asp:Label ID="lblYourInput" runat="server" Text=""></asp:Label>
</p>
</div>
<div id="divVerfiedAddress">
<b>0 verified addresses</b>
</div>
<div style="padding-top: 10px; padding-bottom: 10px; text-align: left;">
<asp:LinkButton ID="lnkConfirmShipping" runat="server" CausesValidation="false" CssClass="button orange"
OnClick="lnkContinue_Click" OnClientClick="return ValidateInput();">Confirm</asp:LinkButton>
<asp:LinkButton ID="lnkEditShipping" runat="server" CausesValidation="false" CommandArgument="3"
CssClass="button orange" OnClick="lnkEditInfo_Click">Edit</asp:LinkButton>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
这很有效，但我想使用jquery应用fadein和fadeout效果。
有什么建议吗
注意：两个Div都是属性为runat=“server”的服务器端Div。这很容易实现，Div的显示/隐藏部分在客户端而不是服务器端处理，但是如何在回发后保持状态..？而不是使用runat=server
，您可以使用asp.net隐藏字段存储状态，并使用jquery在页面加载时使用隐藏字段值显示/隐藏div
protected void lnkContinue_Click(object sender, EventArgs e)
{
//Get the data entered in textboxes assign to Business objects and then show next div
divShippingPanel.Visible = false;
divShippingConfirmPanel.Visible = true;
}
protected void lnkEditInfo_Click(object sender, EventArgs e)
{
string currentStep = (sender as LinkButton).CommandArgument;
if (currentStep == "3")
{
//if arument is 3 go back i.e currentstep-1 for editing the details
divShippingPanel.Visible = true;
divShippingConfirmPanel.Visible = false;
}
}