のアニメーションナビゲーションでアクティブな項目の背景が

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

しかし、それは最初のクリック、Firebugのログに失敗：

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

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

質問はなぜですか？ 、さらに良い

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

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

bgに要素を作成します。項目がそれまでに存在している必要がありますどのような場合には..

Answer 1

は、あなたがそれを作成した後、あなたはbgに割り当てた要素を選択してください：

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