jQuery: затухание изображения при нажатии кнопки ASP.NET ImageButton

Question

Я строю фотогалерею в ASP.NET. Пользователь может просматривать миниатюры по левому краю и выбирать один, который выводит версию в предварительном размере на правую панель страницы.

Я хотел бы постепенно исчезать между изображениями, чтобы текущее изображение исчезало, а следующее - постепенно. Я использую jQuery, чтобы добавить изображение предварительного просмотра после его загрузки, что прекрасно работает. К сожалению, я не могу запустить скрипт fadeOut до того, как событие click отправит страницу обратно на сервер. Миниатюры - это ASP.NET ImageButtons, то есть теги <input>.

Есть ли способ заставить задержку обратной передачи достаточно долго, чтобы изображение исчезло? Я видел некоторые трюки с формой onSubmit и setTimeout(), но это затронуло бы все ссылки и кнопки на странице. Я хочу отложить обратную передачу только для миниатюр.

1010 * ТИА *

РЕДАКТИРОВАТЬ : Основываясь на моих исследованиях и проверяя приведенные ниже предложения, может возможно задержать обратную передачу для достижения этой цели, но это не лучший подход на нескольких уровнях Чтобы получить плавный переход между изображениями, в будущем я бы вообще не делал никаких публикаций. Я бы использовал jQuery исключительно для fadeout, load, fadein.

Answer 1

Попробуйте добавить возвращаемое значение false в вашу функцию, которая обрабатывает fadein / out ... Это должно предотвратить возникновение обратной передачи страницы ...

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

Я не уверен, что вы получаете на PostBack, где вы хотели бы затемнить изображение, а затем добавить его. Рассматривали ли вы использование AJAX для этого? Вы могли бы даже иметь уменьшенное изображение, содержащее необходимую информацию в тегах изображения для большего изображения.

Взгляните на плагин jQuery Lightbox . Я реализовал этот плагин и немного изменил .JS, чтобы допустить просмотр фотографии с более высоким разрешением в дополнение к веб-просмотру. Проверьте это здесь .

Answer 2

Вот решение, которое я использовал:

Поскольку я использую MS AJAX с UpdatePanel, я могу использовать обработчик событий AJAX на стороне клиента.

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

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

Это дает мне точное поведение, которое я хотел - каждый раз, когда пользователь перемещается между миниатюрами, изображение исчезает, загружается, а затем появляется новое.

ОДНАКО ...

Это все еще не идеально, так как между переходами в режим паузы происходит перезапись страницы. Пока это будет работать, но в долгосрочной перспективе было бы лучше использовать jQuery для установки изображения предварительного просмотра, а не миниатюры, отправляемые обратно как ImageButtons.

Answer 3

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