Pesky Popup Problems

Pesky Popup Problems

Hi, I'm trying to make a very basic alerting system.

I've basically got the following:

            var i=0;
            var s=$("[id^=dAlert]").last().attr("id");
           
            if (s!=undefined){
                i = parseInt(s.substring(6));
            }
           
            $("<div id='dAlert"+(++i)+"'>An Alert</div>")
            .css({"border":"1px Solid Black","width":"50px","height":"20px","padding":"3px"})
            .css({"display":"none","position":"absolute","top":(document.documentElement.clientHeight-(30*i))+"px","left":document.documentElement.clientWidth-80+"px"})
            .appendTo("body").fadeIn('slow').delay(5000).fadeOut('slow',function(){
                $(this).remove();
                $("[id^=dAlert]").each(function(){
                    $(this).animate({"top":"+=30px"},500);
                });
            });

this is only proof of concept and so pretty rough. However the problem is the last peice of code, the callback in the fadeout doesnt do what I expect it to.

It does nothing.

I've tried to .stop() the animation queue and allsorts but I think i'm missing something fundamental.

can anyone shed any light on it?

Thanks
Tom