Не удается прочитать свойство «левый» неопределенной

Question

Пытаясь выяснить, почему хром выкидывает ошибку

"Uncaught TypeError: Cannot read property 'left' of undefined"

хотя #explorenav прекрасно работает, но, кажется, не работает #experiencenav. я что-то упускаю?

JS КОД:

$('.nav li#explorenav a').click(function(){ 
    $('body').animate({scrollLeft: $("#explore").offset().left-15}, 1000, function(){ 
     $(this).parent().addClass('active'); 
    }); 

    return false; 
}); 

$('.nav li#experiencenav a').click(function(){ 
    $('body').animate({scrollLeft: $("#experience").offset().left-15}, 1200, function(){ 
     $(this).parent().addClass('active'); 
    }); 

    return false; 
}); 

HTML КОД:

<div id="explore"> 
    <div class="Features"> 
     <div class="Feature1" title="The Active Park Assist feature can find parking spaces for you and help manoeuvre your car into them, as if by magic."> 
      &nbsp; 
     </div> 
     <div class="Feature2" title="The luxurious and athletic Interior has sports front seats with red stitching and belts, making you wish the journey never ended"> 
      &nbsp; 
     </div> 
     <div class="Feature3" title="With Collision Prevention Assist and Attention Assist you can rest assured that you’ll get to wherever you’re going, safely."> 
      &nbsp; 
     </div> 
    </div> 
</div> 

<div id="experience"> 
    <div class="Video"> 
     <iframe id="Youtube" width="650" height="366" src="http://www.youtube.com/embed/XS6S8qSMvBE?wmode=opaque" frameborder="0" wmode="transparent" allowfullscreen ALLOWTRANSPARENCY="true"></iframe> 

     <button class="prev">&nbsp;</button> 
     <button class="next">&nbsp;</button> 
     <div class="VideoControls"> 
      <ul class="Vid"> 
       <li id="01" class="Video1" onClick="_gaq.push(['_trackEvent', 'Pulse', 'onClick', 'ENGLISH']);"> 
        &nbsp; 
       </li> 
       <li id="02" class="Video2" onClick="_gaq.push(['_trackEvent', 'Performance', 'onClick', 'ENGLISH']);"> 
        &nbsp; 
       </li> 
       <li id="03" class="Video3" onClick="_gaq.push(['_trackEvent', 'Parking Assist', 'onClick', 'ENGLISH']);"> 
        &nbsp; 
       </li> 
       <li id="04" class="Video4" onClick="_gaq.push(['_trackEvent', 'Flow', 'onClick', 'ENGLISH']);"> 
        &nbsp; 
       </li> 
       <li id="05" class="Video5" onClick="_gaq.push(['_trackEvent', 'Spike', 'onClick', 'ENGLISH']);"> 
        &nbsp; 
       </li> 
       <li id="06" class="Video6" onClick="_gaq.push(['_trackEvent', 'Product film', 'onClick', 'ENGLISH']);"> 
        &nbsp; 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

В вашем скрипте на сайте у вас есть этот код:

$('.nav li#experiencenav a').click(function(){ 
    $('body').animate({scrollLeft: $("#experience .EmptyPage").offset().left-20}, 1200, function(){ 
     $(this).parent().addClass('active'); 
     $('li#homenav, li#discovernav, li#explorenav, li#downloadnav').removeClass('active'); 
    }); 
     return false; 
    }); 

и он не может найти элемент $("#experience .EmptyPage"). Но вы Div внутри #explore DIV, который имеет этот DIV:

<div class="EmptyPage"> 
&nbsp; 
</div> 

Вот почему ваш код работает для исследовать связь, но не для других ссылок.