gifを読み込んで追加データをフェードインする

Question

$(document).ready(function(){ 
$('#load-extmsg-1').click(function(){ 
$("#stars").empty().html('<img src="/images/ajax-loader2.gif" id="loadingpic" style="width:25px;height:25px;border:0px;margin-left:48px;margin-top:0px;" />'); 
$.post('starproc.asp?picid=<%=picid%>&starrating=1', function(data){ 
$("#loadingpic").remove(); 
$("#stars").append(data); 
}) 
}); 
}); 

JQueryは動作しますが、ロードするgifを1秒間保存してから追加データをフェードインするにはどうすればよいですか？

少し試行錯誤して動作するコードは次のとおりです。

$(document).ready(function(){ 
$('#load-extmsg-1').click(function(){ 
$("#stars").empty().html('<img src="/images/ajax-loader2.gif" id="loadingpic" style="width:25px;height:25px;border:0px;margin-left:48px;margin-top:0px;" />').fadeIn(200).delay(300); 
$.post('starproc.asp?picid=<%=picid%>&starrating=1', function(data){ 
$("#loadingpic").fadeOut(300).delay(200); 
$("#stars").append(data); 
}) 
}); 
}); 

Answer 1

$("#stars").fadeOut().delay(200).append(data).delay(1000).fadeIn(1000); 

==

$(document).ready(function(){ 
$('#load-extmsg-1').click(function(){ 
$("#stars").empty().html('<img src="/images/ajax-loader2.gif" id="loadingpic" style="width:25px;height:25px;border:0px;margin-left:48px;margin-top:0px;" />'); 
$.post('starproc.asp?picid=<%=picid%>&starrating=1', function(data){ 
$("#loadingpic").remove(); 
    $("#stars").fadeOut().delay(200).append(data).delay(1000).fadeIn(1000); 
}) 
}); 
}); 

Answer 2

は、このいずれかを試してみてください。

var postMyData = function(){ 
    $.post('starproc.asp?picid=<%=picid%>&starrating=1', function(data){ 
     $("#stars").animate({opacity:0},200,function(){ 
      $("#loadingpic").remove(); 
      $(this).append(data).animate({opacity:1},200);; 
     }); 
    }); 
}; 
$(document).ready(function(){ 
    $('#load-extmsg-1').click(function(){ 
     var h = '<img src="/images/ajax-loader2.gif" id="loadingpic" style="width:25px;height:25px;border:0px;margin-left:48px;margin-top:0px;" />';   
     $("#stars").animate({opacity:0},200,function(){ 
      $(this).empty().html(h).animate({opacity:1},200,function(){ postMyDate(); }); 
     }); 
    }); 
}); 

これが動作し、そうでない場合は、より多くの助けに教えてくれます。