上拉，更改内容，然后向下滑动与jQuery

Question

我开发下面的代码向上滑动注册面板，然后更改其内容，然后滑下登录面板。

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

但它更改了内容，然后将其向上滑动并向下滑动。 我应该怎样做，以便在滑动后更改内容？

Answer 1

从效果基本show使用回调函数来等待，直到幻灯片结束，然后执行你想要什么，例如：

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

Answer 2

你可以试试这个

var slider = $("#signup-button"); 
slider.slideUp(1500, function(){   
     slider.html(content).slideDown(1500);       
}); 

观看演示这里http://jsfiddle.net/UdagC/

Answer 3

内容在slideUp之前进入。这样做：

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

Answer 4

尝试类似这样;

$("#signup-button").slideUp('slow',function(){ 
    $("#signup-button").html(content).slideDown('slow') 
}); 

其中'慢'是你想要的速度。