Jquery 中 $(this) 在巢狀callback function中的處理

嘗試在Weebly裡面用Jquery做個fade效果的tabs，使用.load()載入指定的頁面內容
計畫為

上層div隱藏，下層為內容
上層div載入新內容
fade顯示上層div
下層div載入新內容
隱藏上層div

用過連鎖動作無法完美達成，也許是因為連鎖沒有辦法判斷新內容是否載入完全就接著動作
所以用巢狀callback function來做，因為在JQuery文件(忘了是官方還是神人的文件)中有註明，load()的callback會在載入完成後觸發
在過程中遇到一個無法解釋的問題，原來有問題的程式碼全碼如下

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>


<style 'text/css'>
#nav {clear: both; width: 100%; overflow: hidden;}
#nav li {display: inline;}
#nav li a, #nav li a:visited {display: block; float: left; line-height: 30px; padding: 0 15px; background:#999; text-transform: uppercase; color: #fff; text-decoration: none; margin-right:
1px; border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px
solid #000;}
#nav li a:hover {color: #ccc;}
#nav li a.current {background:
#EEE; color: #033333; border-color: #ccc;}


#_content {padding: 10px 0; width: 100%;min-height: 250px;background:#EEE;width:inherit;}
.text-center{text-align:center;}
#cover{padding:10px 0;width:inherit;min-height:250px;position:absolute;z-index:100;}
#wrap{min-height:250px;border:1px solid #999;width:750px;}
</style>


 <ul id="nav">
  <li><a href="tab1.html" >Page 1</a></li>
  <li><a href="tab2.html">Page 2</a></li>
  <li><a href="tab3.html">Page 3</a></li>
 </ul>
<div id="wrap">
<div id="cover"></div>  
 <div id="_content">
   <p>This is default content and will be replaced</p>
 </div>
</div>
<script >
$(document).ready(function() {
    $("#nav li a").click(function() {
        $("#nav li a").removeClass('current');
        $(this).addClass('current');
        $("#cover").load($(this).attr("href")+" #wsite-content",function(){
          $("#cover").fadeIn(2000,function(){
            $("#_content").load($(this).attr("href")+" #wsite-content",function(){
              $("#cover").fadeOut(2000);
            });
          });
        });
        return false;
    });
});
</script>

看起來好像沒問題，但是第二層callback function中的$(this).attr("href")怎麼樣都載不進去。
最終在外面設變數先讀取，解決了這個問題，也更簡潔了

<script >
$(document).ready(function() {
    $("#nav li a").click(function() {
        $("#nav li a").removeClass('current');
        $(this).addClass('current');
        var href=$(this).attr("href")+" #wsite-content";
        $("#cover").load(href,function(){
          $("#cover").fadeIn(2000,function(){
            $("#_content").load(href,function(){
              $("#cover").fadeOut(2000);
            });
          });
        });
        return false;
    });
});
</script>