Question

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 layout 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.

Answer 1

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.