jQuery：ASP.NET ImageButtonをクリックすると画像がフェードアウトする

Question

私はASP.NETでフォトギャラリーを構築しています。ユーザーは、左側のサムネイルをブラウズして1つを選択すると、ページの右ペインにプレビューサイズのバージョンが表示されます。

イメージをフェードアウトして、現在のフェードアウトと次のフェードインを行うようにしたいと思います。jQueryを使用してプレビューイメージを読み込んだ後にフェードインします。残念ながら、クリックイベントがページをサーバーにポストバックする前に、fadeOutスクリプトを実行することができません。サムネイルはASP.NET ImageButtonsです。つまり、<input>タグです。

イメージがフェードアウトするのに十分な時間だけポストバックを取得する方法はありますか？私はフォームonSubmitとsetTimeout()でいくつかのトリックを見てきましたが、それはページのすべてのリンクとボタンに影響します。サムネイルのポストバックを遅らせたい

TIA

EDIT：私の研究に基づいて、以下の提案をしようと、それはこれを達成するためのポストバックを遅らせることが可能かもしれないが、それはいくつかのレベルで最高のアプローチではありません。イメージ間のクリーンなフェードトランジションを得るために、将来私はポストバックを全くしません。私はフェードアウト、ロード、フェードインのためにjQueryだけを使用します。

Answer 1

ここで私が使用した溶液です：

私はUpdatePanelのでMS AJAXを使用しておりますので、私は、クライアント側のAJAXのイベントハンドラを使用することができます。

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

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

これは私が、ユーザがサムネイルの間を移動する任意の時間をwanted-正確な動作を与え、画像は、負荷をフェードアウトし、新しいものがフェードイン。

...しかし

これはまだ理想的ではありません。なぜなら、ページがポストバックしている間にフェード間に休止があるからです。今は動作しますが、長期的には、サムネイルをImageButtonとしてポストバックするのではなく、jQueryを使用してプレビュー画像を設定する方がよいでしょう。

Answer 2

フェードイン/アウトを扱うあなたの機能に虚偽のリターンを追加してみてください...それが発生してからページポストバックを防ぐ必要があります...

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

私はあなたが上になっているかわからないんだけどあなたが画像をフェードアウトしてから消したいと思っているPostBack。AJAXを使って考えてみましたか？サムネイル画像に画像タグの中に必要な情報が含まれていても、大きな画像にすることができます。

jQuery Lightbox pluginをご覧ください。私はこのプラグインを実装して、Webビューに加えてより高解像度の写真を表示できるように少し修正しました。それをチェックしてくださいhere。

Answer 3

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