Анимировать частичное представление с помощью Jquery после ответа Ajax в asp.net mvc 3

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 перед анимацией в новом контенте.