Question

我正在ASP.NET中构建一个照片库。用户可以浏览左侧的缩略图并选择一个，这会将预览大小的版本带入页面的右侧窗格。

我想在图像之间淡入淡出，以便当前的图像淡出而下一个图像淡入。我正在使用jQuery在加载后淡化预览图像，这很有效。不幸的是，在点击事件将页面发回服务器之前，我无法运行fadeOut脚本。缩略图是ASP.NET ImageButtons，这意味着它们是<input>标签。

有没有办法让回发延迟足够长的时间让图像淡出？我已经看到了一些表单onSubmit和setTimeout()的技巧，但这会影响页面上的所有链接和按钮。我想延迟缩略图的回发。

TIA

编辑：根据我的研究，并尝试下面的建议，可能可以延迟回发来完成此操作，但它不是几个级别的最佳方法。为了在图像之间获得干净的淡入淡出过渡，将来我根本不会做任何回复。我会专门为jadeout，load，fadein使用jQuery。

Answer 1

尝试在处理淡入/淡出的函数中添加一个返回false ...它应该阻止页面回发...

$('#<%= this.aspbutton.ClientId%>').click(function(){
    $('#myDiv').fadeout("slow");
    return false;
});

我不确定你在PostBack上得到了什么，你想要淡出图像然后淡入一个。你有没有考虑过使用AJAX？您甚至可以让缩略图图像包含较大图像的图像标记内的必要信息。

看看jQuery Lightbox plugin。我已经实现了这个插件并修改了.JS以允许除了Web视图之外还可以查看更高分辨率的照片。请查看here。

Answer 2

$('#<%= this.aspbutton.ClientId%>').click(function(){
    var $btn = $(this);
    $('#myDiv').fadeout("slow", function() {
      $btn.unbind('click').click();
    });
    return false;
});

Answer 3

以下是我使用的解决方案：

由于我使用MS AJAX和UpdatePanel，我可以使用客户端AJAX事件处理程序。

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);

function fadeOut() {
        if ($('.mainImage').length > 0) {
            $('.mainImage').fadeOut('normal');
        }
    }

这给了我想要的确切行为 - 每当用户在缩略图之间导航，图像淡出，加载，然后新的淡入淡出。

...无论其

这仍然不理想，因为当页面回发时，淡入淡出之间会有暂停。它现在可以使用，但从长远来看，最好使用jQuery来设置预览图像，而不是将缩略图作为ImageButtons回传。

jQuery：单击ASP.NET ImageButton时淡出图像

3 个答案: