Question

I develop following code to slide up register panel, then change its content and then slide down logged in panel.

function ValidLogin(data)
{
    var content = null;;
    content = '<a id="link-show" class="g-button g-button-red" href="<?php echo base_url(); ?>index.php/cv/show/';
    content += data.id;
    content += '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;www.onlinecv.ir/index.php/cv/show/'
    content += data.id;
    content += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    content += 'رزومه ام را نشانم بده';

    content += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="link-signout" class="g-button g-button-red" href="#';
    content += '">&nbsp;&nbsp;خروج&nbsp;&nbsp;'
    content += '</a>';
    content += '</span>'


    $("#signup-button").slideUp(1500).delay(1500);
    $("#signup-button").html(content).slideDown(1500);
}

but it changed content ,then slide it up and slide it down.
what should I do to changing content after sliding up?

Answer 1

Use the callback function from slideup to wait until the slide finish and then execute what you want, for example:

$("#signup-button").slideUp(1500, function(){
    // do what you want here
    // then slidedown again :)
});