ここで必要なものが 2 つまたは 3 つあります。まず第一に、フックしているコントロールが ajax ポストバックで消えている場合は、次を使用してページのリロード時にイベント ハンドラーを再フックする必要があります。
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
//Re-hook code here
}
}
または、$(document).ready() 関数で .live() 関数を使用して、イベント フックを追加します。この関数は、JQuery UI の API サイトで詳しく説明されています。
また、ポストバックを実行する前にアニメーション効果で何かを非表示にする場合 (アニメーションが完了する前に変更されないようにするため)、次のように .Promise().Done() 関数を使用します。
$("#Detail").fadeOut().promise().done(function ()
{
__doPostBack('<%= UpdatePanel1.ClientID %>', '');
});
最後に、ポストバックが完了して結果を表示するときにアニメーションを発生させたい場合は、これらすべてを、次のように pageLoad 関数でアクションを有効にするブール変数と組み合わせて使用できます。
var ShowDetailsOnLoad = false;
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
if (ShowDetailsOnLoad)
{
$("#Detail").fadeIn();
ShowDetailsOnLoad = false;
}
$('DetailVisMaker').click(function()
{
$("#Detail").fadeOut().promise().done(function ()
{
__doPostBack('<%= UpdatePanel1.ClientID %>', '');
ShowDetailsOnLoad = true;
});
});
}
}
div、HTML、および UpdatePanel が正しく設定されている場合、このコードは詳細 div を表示し、ユーザーがその中のリンクをクリックすると、詳細セクションがフェードアウトし、ポストバックが実行されてからフェードインします。ポストバックが完了しました。