I have two webform panels that I display & hide based on a click event in Code Behind.
This is the default state:

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

```

On a button (#btnStepOne) click event, I currently change the visibility of the panels by switching the visibility values:

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

```

This part works well. However, I would like to fade in the pnlStepTwo instead of displaying it instantly by changing the visibility settings.

I tried to do this:

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

```

But this doesn't seem to work. I assume it's because the pnlStepTwo is not yet visible.

How can I fade in the #pnlStepTwo instead of displaying it instantly?

**EDIT**:

Here's my validation code on 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);

            }
        });

```