jquery - 如何在成功的 jQuery ajax 调用后模拟轮播数据刷新？

Question

我有一个包含一些文章的 div。当用户单击下一步按钮时，我希望现有文章向左滑动并让下一页文章滑入以替换它们。

如果用户单击 > 下一个链接，我希望我的结果向左滑动，如果用户单击 < prev 链接，我希望我的结果向右滑动。（有点像旋转木马）

这是 slideDown 动画的一个工作示例。

//Fetch the new result set.
$.ajax({
    url: '/Home/_WhatsNew',
    type: 'POST',
    data: JSON.stringify(jsonData),
    dataType: 'html',
    contentType: 'application/json',

    //The request was a success. Repopulate the div with new result set.
    success: function (data) {
        $("#Content").empty();
        $(data).hide().appendTo('#Content').slideDown();
    },
    error: function (data) {
        alert('Fail');
    }
});

是否有可能以类似轮播的方式做到这一点？

Answer 1

您可以使用jQuery UI 幻灯片效果：

success: function (data) {
    $('#Content')
        .hide('slide', { direction: 'left' }, 400, function () {
            $(this)
                .html(result)
                .show('slide', { direction: 'right' }, 400);
        });
}

只需将jquery-ui-1.8.11.js脚本包含到您的页面并享受：

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>