如何在更新后滑动更新面板内容

Question

我有一个包含图像和按钮的更新面板。当点击“Next Image”按钮时，图像控件一次显示一个图像，点击“Previous Image”按钮显示上一个图像。代码示例是这样的

protected void btnNext_Click(..) 
{ 
    Image1.ImageUrl=getNextImageFromDatabase(); 
    UpdatePanel1.Update(); 
} 
protected void btnPrevious_Click(..) 
{ 
    Image1.ImageUrl=getPreviousImageFromDatabase(); 
    UpdatePanel1.Update(); 
} 

现在我想知道的是，有没有什么办法，我可以幻灯片图像或更新面板任何内容上的“下一张”点击，同样向右时，左点击时在“上一张图片”上？有什么方法使用AjaxToolKit或JQuery？

Answer 1

您可以使用jQuery的淡入淡出方法，它看起来像一个幻灯片效果

见例如这里http://api.jquery.com/promise/#example-1

Answer 2

与jQuery你可以简单的动画利润率左为负值，因此图像会disapear。我本人来说使用此解决方案：

• 上一个/上一个按钮
• 显示加载图像（GIF）用户点击
• 创建图像（var img = new Image()）在javascript该图像
• 集的onload动作移动旧的左/右，并追加新的图像等。
• get next/prev image url
• 分配创建的图像的src，所以当它被加载时，onload动作被执行。

在这种情况下，AjaxToolkit可能不是最干净的解决方案。你可能需要做一些简单的服务，返回nex/prev图像url，但这只是几行代码...