我对大多数形式的客户端编程都很陌生。所以这个周末我尝试练习一下。
我创建了一个简单的 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 设置动画。它应该向下滑动并显示所有四行文本。
最佳答案
您需要隐藏现有内容(将其设置为 display:none
),以便以动画方式重新显示内容。
最初,您可以使用 CSS 隐藏内容:
#Result { display:none; }
但是初始内容显然不会出现。
要使 div#Result
每次都向下滑动,您可以将 animate
函数更改为如下所示:
$("#Result").hide().slideDown("slow");
这会在新内容中设置动画之前隐藏 div
。
关于jquery - 在 asp.net mvc 3 中的 Ajax 响应后使用 Jquery 对部分 View 进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6485378/