延遲加載GIF和附加數據

$(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秒鐘，然後淡出所附的數據失效？延遲加載GIF和附加數據

以下是經過一些試驗和錯誤後的代碼。

$(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); 
}) 
}); 
});

來源

2011-09-10 Patriotec

$("#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); 
}) 
}); 
});

來源

2011-09-10 00:45:26 genesis

你可以添加到現有的代碼？不知道我應該堅持或取代現有的代碼。謝謝 – Patriotec

@Patriotec：爲你添加 – genesis

沒有。在提交時，gif加載然後快速消失，然後div淡出，然後數據被追加。 – Patriotec

試試這個：

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(); }); 
     }); 
    }); 
});

這將工作，如果沒有，告訴更多的幫助。

來源

2011-09-10 01:14:58

延遲加載GIF和附加數據

回答

相關問題