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

这将有效，如果没有，请告诉更多帮助。

延迟加载gif并淡化附加数据

2 个答案: