javascript - jquery幻灯片和隐藏部分div

Question

有了这个 html

 <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>​

我试图简单地new-person点击幻灯片中的person-section.

我有两个问题：

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不要忘记给它包含 parent 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/