jquery - 在 asp.net mvc 3 中的 Ajax 响应后使用 Jquery 对部分 View 进行动画处理

Question

我对大多数形式的客户端编程都很陌生。所以这个周末我尝试练习一下。

我创建了一个简单的 ASP.net MVC 3 站点，并成功使用 Ajax 来更新具有部分 View 的 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>

这是我编写的 View 代码:

<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); 
    }

最后是部分 View :

@model AjaxStuff.Models.AjaxStatement

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

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

Answer 1

您需要隐藏现有内容(将其设置为 display:none)，以便以动画方式重新显示内容。

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

#Result { display:none; }

但是初始内容显然不会出现。

要使 div#Result 每次都向下滑动，您可以将 animate 函数更改为如下所示:

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

这会在新内容中设置动画之前隐藏 div。