0

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.

Arman
  • 4,566
  • 10
  • 45
  • 66

1 Answers1

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(); });
        }
);
Andy
  • 29,707
  • 9
  • 41
  • 58
  • Thanks for suggestion, unfortunately it does not help. When I call fadeOut, the jgrowl window a little bit squeezing and due to that I am getting jerky transition. – Arman Dec 20 '10 at 22:15