動畫在一個導航活動項背景失敗

Question

我有以下標記：

<ul> 
    <li><a href="#">first</a></li> 
    <li><a href="#">largerWord</a></li> 
    <li class="active"><a href="#">third</a></li> 
</ul> 

的項目有，除了活動類，即具有藍色透明背景。

這個想法是，當用戶單擊（而不是活動）而不是切換背景時，我想要移動背景，您可以在這裏看到結果幾乎完成，但第一次點擊失敗（請參閱問題的結尾日誌）：

http://jsfiddle.net/FeV55/26/

我做的是動態創建較低的z索引<li>和動畫左根據（點擊）項的偏移，並根據該寬度（點擊）項寬度

jquery代碼：

$(document).ready(function(){ 

    $('ul li a').not('.active').click(function(){ 
     /*caching*/  
     var activa = $('li.active'); 
     var bg = $('li.back');; 
     var list = $(this).closest('ul'); 
     /*when it's first click the background item doesnt exist*/ 
     if(bg.length>0 == false){ 
      list.append('<li class="back"></li>'); 
     } 
     var width = $(this).outerWidth(true); 
     var leftUL = list.offset().left; 
     var leftThis = $(this).offset().left; 
     var left = leftThis - leftUL; 
     /*Remove class to previous active*/ 
     activa.removeClass('active'); 
     /*Cancel background even if parent is active*/ 
     $(this).addClass('noBg'); 
     /*Update active class*/ 
     $(this).parent().addClass('active'); 
     /*Move the background to its offset*/ 
     bg.animate({'left':left,'width':width}); 

     /*logs*/ 
     $('#oUl').text(leftUL); 
     $('#ocl').text($(this).offset().left); 
     $('#odf').text(left); 
     $('#obg').text(bg.offset().left); 
    }); 
}); 

但它首先點擊失敗，螢火日誌：

bg.offset() is null 
[Parar en este error] 

$('#obg').text(bg.offset().left); 

問題是爲什麼呢？該項目應該存在，那麼在任何情況下..

Answer 1

確保創建之後，選擇你分配給bg元素：

var bg = $('li.back'); 

if (bg.length == 0) { 
    list.append('<li class="back"></li>'); 
    bg = $('li.back'); 
} 

更妙的是，創建元素爲bg：

if (bg.length == 0) { 
    bg = $('<li class="back"></li>'); 
    list.append(bg); 
}