Animate a partial view with Jquery after an Ajax response in asp.net mvc 3

I am new to most forms of client side programming. So this weekend I'm trying to practice a little bit.

I created a simple ASP.net MVC 3 site and have successfully got Ajax to update a div with a partial view. Now I'm trying to use Jquery slide down animation to reveal the new content.

Here are the scripts i have included in the la开发者_JAVA百科yout page:

I added Jquery UI

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

Here is the view code I have written:

<div id = "Result"><p>this is an old statement</p></div>

<p>
@Ajax.ActionLink("Ajax Request","AjaxRequest", new AjaxOptions{UpdateTargetId = "Result", OnSuccess = "animate" })
<script>
    function animate() {
        $('#Result').slideDown('slow')
    }
</script>

And the action method :

public ActionResult AjaxRequest()
    {
        AjaxStatement s = new AjaxStatement();

        return PartialView("_Result", s); 
    }

Finally the partial View:

@model AjaxStuff.Models.AjaxStatement

<p>@Model.Statement</p>
<p>@Model.Statement</p>
<p>@Model.Statement</p>
<p>@Model.Statement</p>

The Ajax request works fine but I want Jquery to animate the partial view once OnSuccess is fired. It should slide down and reveal all four lines of text.

You need to hide the existing content (make it display:none) in order to animate the content back in.

Initially, you could hide the content using CSS:

#Result { display:none; }

But then initial content would obviously not appear.

To make div#Result slide down every time, you could change your animate function to something like this:

$("#Result").hide().slideDown("slow");

Which would hide the div before animating in the new content.