jQuery的幻燈片和隱藏部分的div

Question

有了這個網站

<div id="main-content"> 
     <section id="search-section" class="active">Test 1 
      <button id="new-person" data-section="person-section" type="button"> 
       New Person 
      </button> 
     </section> 
     <section id="person-section">Test adfs </section> 
    </div>​ 

我想幹脆就在person-section的new-person單擊幻燈片。

兩個問題我有：

1. 我看不到有這個人，部分隱藏，我想在初始加載只有我search-section可見。

2. 使用下面的javascript，jQuery的滑動部分找不到我正在使用的查詢選擇器。關於如何實現這一點的任何想法或者是否有一個已經做到這一點的現有插件。

   $(document).ready(function() { 
   
       $('#new-person').click(function() 
       { 
         event.preventDefault(); 
         var sectionId = $(this).attr("data-section"), 
         $toSlide= $("#"+sectionId), 
         $fromSlide= $('.active'); 
   
        if (!($toSlide.hasClass("active"))) 
        { 
   
         $fromSlide.animate({"left":"-100%"},500,'linear') 
         $toSlide.animate({"left":"0%"},500,'linear',function() 
         { 
          $fromSlide.css("left","100%"); 
          $fromSlide.removeClass("active"); 
          $toSlide.addClass("active"); 
         }); 
   
        } 
   
       }); 
   }); 
   

Answer 1

我通過推左視圖區域的藏person-section。這是通過給它一個left和position風格。不要忘記給它包含父母position:relative。 $fromSlide不知道你要去哪裏，所以我刪除它並清理了代碼。

<div id="main-content" style="position:relative;"> 
     <section id="search-section" class="active">Test 1 
      <button id="new-person" data-section="person-section" type="button"> 
       New Person 
      </button> 
     </section> 
     <section id="person-section" style="position:absolute; left:-100px;">Test adfs </section> 
    </div 

-

$('#new-person').click(function(e) { 
    e.preventDefault(); 
    var sectionId = $(this).attr("data-section"); 
    $toSlide = $("#" + sectionId); 

    if (!($toSlide.hasClass("active"))) { 
     $toSlide.animate({ 
      "left": "0%" 
     }, 500, 'linear', function() { 
      $toSlide.addClass("active"); 
     }); 
    } 
    else { 
     $toSlide.animate({ 
      "left": "-100%" 
     }, 500, 'linear', function() { 
      $toSlide.removeClass("active"); 
     }) 
    } 
}); 

查看工作示例這裏：http://jsfiddle.net/fP7DL/