上拉，更改內容，然後向下滑動與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') 
}); 

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