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点击幻灯片。

我遇到的两个问题：

我看不到人物部分隐藏，我想在初始加载时只有我的search-section可见。

使用以下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/

jquery幻灯片和隐藏部分div

1 个答案: