c# - 如何使用 jQuery 淡入服务器控件？

Question

我有两个基于代码隐藏中的单击事件显示和隐藏的网络表单面板。这是默认状态:

pnlStepOne.Visible = true;
pnlStepTwo.Visible = false;

在按钮 (#btnStepOne) 单击事件上，我目前通过切换可见性值来更改面板的可见性:

protected void btnStepOne_Click(object sender, EventArgs e)
{
pnlStepOne.Visible = false;
pnlStepTwo.Visible = true;
}

这部分效果很好。但是，我想淡入 pnlStepTwo 而不是通过更改可见性设置立即显示它。

我试着这样做:

$("#btnStepOne").click(function (event) {
    $('#pnlStepTwo').fadeIn(3000);
});

但这似乎行不通。我认为这是因为 pnlStepTwo 尚不可见。

我怎样才能淡入#pnlStepTwo 而不是立即显示它？

编辑:

这是我在 pnlStepOne 上的验证码:

 $("#<%=btnStepOne.ClientID%>").click(function (event) {

            var fvFname = document.getElementById('fvFname');
            var fvLname = document.getElementById('fvLname');

            ValidatorValidate(fvFname);
            ValidatorValidate(fvLname);

            if (!fvFname.isvalid || !fvLname.isvalid) {
                $("#<%=pnlStepOne.ClientID%>").effect("shake");
            }

            if (fvFname.isvalid && fvLname.isvalid) {

                $('#<%=pnlStepOne.ClientID%>').hide();
                $('#<%=pnlStepTwo.ClientID%>').fadeIn(500);

            }
        });

Answer 1

控件的 Visibility 属性不允许在页面中呈现。而是使用 display:none 使用 javascript。

使用 Javascript 隐藏面板:

<script type="text/javascript">
function ShowPanelTwo()
{
  $('#<%=pnlStepOne.ClientID%>').css("display","none");
  //$('#<%=pnlStepTwo.ClientID%>').css("display","block");
  $('#<%=pnlStepTwo.ClientID%>').fadeIn(3000);

}

</script>

从代码隐藏调用:

protected void btnStepOne_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "uniquekey", "<script type='text/javascript'>ShowPanelTwo();</script>");
}

您还可以使用:

$("#<%=btnStepOne.ClientID%>").click(function (event) {
   $('#<%=btnStepTwo.ClientID%>').fadeIn(3000);
});

希望这对您有所帮助!