如何在成功的jQuery ajax调用时模仿数据的轮播刷新？

Question

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

进出口寻找有我的结果左如果用户如果用户点击<上一个链接在点击右边的>下一个环节或幻灯片幻灯片。 （有点像旋转木马）

下面是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 slide effect：

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>