Question

I am setting the text inside the jgrowl message box.
Here is the example:

function findID(whichID, command){
                    if($(whichID).length)
                    {
                        var url='<script>\n\
                         $("'+whichID+'").fadeOut().load("include/common.php?q='+command+'&p='+username+'", function(response, status, xhr) { $(this).fadeIn(); });<\/script>';
                        $(whichID).fadeOut().html(url).fadeIn();
                    }
                }

var myID0="myID0";
var data='<div id="'+myID0+'" class="arm-info"></div>';
            $('#rightcolumn').jGrowl(data, {sticky:true });
mytimerID0=window.setInterval(findID, 3000, '#'+myID0, "show_queue");

It works but the replacement is really jerky.

How to make a smooth transition between two load calls?

Thanks Arman.

Answer 1

maybe replace the html after the fadout is complete, then fadeIn again.

$(whichID).fadeOut(function(){ $(this).html(url).fadeIn(); });

if you do

$(whichID).fadeOut().html(url).fadeIn();

it’ll replace the html the same time it starts fading out.

edit:

couldn’t you just write in the findID function? I don’t think you need the script tag:

$.ajax( url:'include/common.php?q='+command+'&p='+username, 
        success: function(data){ 
           $(this).fadeOut(function(){ $(this).html(data).fadeIn(); });
        }
);