Javascript jquery幻灯片和隐藏部分div

使用此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>​

---

我通过将其推到视图区域的左侧隐藏了个人部分。这是通过给它一个

左

和

位置

样式来实现的。别忘了给它的包含父

位置：relative

。我不确定您将如何使用幻灯片中的

$fromsile

，因此我将其删除并清理了代码

<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

---

此处查看工作示例：

有$fromSlide，因此我可以将其替换为$toSlide，您的解决方案仍然显示活动部分，我想将其中一个替换为另一个。A.V的解决方案做到了这一点，但它使该部分是固定的，我希望它们是相对的

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