나는 다음과 같은 마크 업을

Question

실패합니다.

아이디어는 배경을 전환하려는 대신 배경을 전환하는 대신 활성 상태가 아니라 배경을 이동하면 여기에서 거의 완료된 결과를 볼 수 있지만 첫 번째 클릭에는 실패합니다 (오류의 끝 부분을 참조하십시오).) 로그 :

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

동적으로 낮은 Z- 색인 <li>을 만들고 왼쪽 따른 (클릭) 항목 오프셋 폭이 (클릭에 따라) 항목

폭 애니메이션이다 무엇 jquery 코드 :

,210

$(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); 

질문은 왜?

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