0

最近jQueryを学び始めました。オンラインのどこにも見つからなかったため、Web サイトのコンテンツをフェードインおよびフェードアウトするスクリプトを作成しようとしています。

私のスクリプトがあります：http://jsfiddle.net/hf9xJ/3/

私の問題は、(1 つのセッションで) 各リンクを少なくとも 1 回クリックした後にのみ、スクリプトが正しく機能することです。その後、fadeOut（）とfadeIn（）は完全に機能します。

削除しようとすると、 animate({ "left": "0%" }, 500, 'linear', スクリプト全体が突然機能しなくなります。

誰かがこの問題を修正する方法を知っていますか、またはスクリプト全体をより良い方法で書くためのより良いアイデアを持っていますか?

ありがとう！

4

2 に答える 2

0

left：100％を#content section：nth-​​child（1）からleft：0％に置き換え、このcssを追加する必要があります

#content .active{
  z-index: 100;
}

jsをこれに変更します

  $("#content section").css("visibility", "hidden")
      .each(function(index, element) {
          elem=$(element);
          if (!(elem.hasClass("active"))) {
              elem.fadeOut();
          }
  });

  $("#content .active").css("visibility", "visible").fadeIn();

  $('a').on('click', function (event) {
  //event.preventDefault();

      var  sectionId = $(this).attr("data-section"),
            $toSlide = $("#content section#" + sectionId),
          $fromSlide = $('.active');

  if (!($toSlide.hasClass("active"))) {
      $fromSlide.fadeOut().css("visibility", "hidden").removeClass("active");
      $toSlide.addClass("active").css("visibility", "visible").fadeIn();
  }

 });
于 2013-02-02T11:46:42.500 に答える
0

あなたのCSS

#content section {
position: absolute;
left:100%;
}

左を 0 に設定

＆それらをに設定しますdisplay:none（ロード時に表示される最初のものを除く））

注意: フェードアウトは最初のクリックで機能しますが、同時に left:100% から left:0 へのアニメーションが実行されています。左のアニメーションが左の 0 から左の 0 にアニメーション化された後、何も表示されず、フェードイン アニメーションのみが表示されます。

于 2013-02-02T11:33:09.953 に答える