JQuery fadeOut然後加載

Question

我對JQuery相當陌生，而且我遇到了淡入淡出然後加載的問題。

我的代碼是：

$("#refresh").live("click", function() { 
    $("#postbit").fadeOut("slow"); 
     $("#postbit").load('load.php').fadeIn("slow"); 
    return false; 
}); 

但它似乎並沒有工作。如果我之前沒有fadeout，它就可以正常工作，只需加載它即可。但是，有沒有辦法讓它淡出第一，然後讓它慢慢淡入:)

感謝

Answer 1

如果您使用的是jQuery 1.7或更高版本（可能是新的），您不應該再使用.live，因爲它不僅不好，而且在以後的版本中也會被刪除。 return false from events is also bad

// Change this to the known parent of #refresh 
// Do you even need delegation? 
$("#refresh").closest('*').on('click', '#refresh', function (e) { 

    // Callback to fadeOut (after fadeOut): load 
    $("#postbit").fadeOut('slow', function() { 

     // So you can reference this element without selector later 
     var $this = $(this); 

     // Callback to load -- takes place after load completes 
     $this.load('load.php', function() { 
     $this.fadeIn('slow'); 
     }); 
    }); 

    // Prevent click from doing whatever it would normally do on #refresh 
    e.preventDefault(); 
}); 

Answer 2

.fadeOut()，像許多其他的jQuery的功能，可以讓你指定一個動畫後執行一個回調函數已完成：

$("#refresh").live("click", function() { 
    $("#postbit").fadeOut("slow", function() { 
     $("#postbit").load('load.php').fadeIn("slow"); 
    }); 

    return false; 
}); 

這將執行一次淡出動畫結束匿名函數內的代碼（的.fadeOut()第二arfument）。

---

順便說一句，你應該不再使用.live()，因爲它有利於.on()棄用。