Question

How can I give a fade in effect for a <p> element in my website?

For example, here I’m using Ajax to fetch the current server time. They are brought up into view abruptly and I was wondering if I could make that appearance be smoother. Fade it in, if possible.

<script type="text/javascript">
    $(document).ready(function () {
        $(".newstatus").fadeIn();
    });
</script>

@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.InsertAfter })

And in my Controller:

public ActionResult GetStatus()
{
    return Content("<p class=\"newstatus\">Status OK - " + DateTime.Now.ToLongTimeString() + ".</p>");
}

Any suggestions on how to approach this particular problem? I’d like to use jQuery if possible.

Answer 1

$(“#elementid”).fadeIn();

this will fade in the elementid element