在asp.net mvc 3中的Ajax响应之后使用Jquery为部分视图设置动画

Question

我是大多数客户端编程形式的新手.所以本周末我正试着练习一下.

我创建了一个简单的ASP.net MVC 3站点,并成功获得Ajax以部分视图更新div.现在我正在尝试使用Jquery下滑动画来显示新内容.

以下是我在布局页面中包含的脚本:

我添加了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>

这是我写的视图代码:

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

和动作方法:

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

        return PartialView("_Result", s); 
    }

最后局部视图:

@model AjaxStuff.Models.AjaxStatement

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

Ajax请求工作正常但我希望Jquery在触发OnSuccess后为部分视图设置动画.它应该向下滑动并显示所有四行文本.

Answer 1

您需要隐藏现有内容(制作它display:none)才能为内容设置动画.

最初,您可以使用CSS隐藏内容:

#Result { display:none; }

但是,最初的内容显然不会出现.

要div#Result每次都向下滑动,您可以将animate功能更改为以下内容:

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

这将隐藏div在新内容中的动画之前.