0

この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。

私が抱えている2つの問題：

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

        }

    });
});
4

1 に答える 1

1

person-sectionビューエリアの左に押して隠しました。leftandpositionスタイルを与えることでこれを行いました。親を含むことを忘れないでください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/

于 2012-12-30T06:53:15.027 に答える