2

jQuery のフェードインとフェードアウトを使用して、ナビゲーション バーのリンクが選択されたときに現在のページをフェードアウトさせ、新しいページをフェードインさせたいと考えています。期待した効果が得られません。

これが私のコードです：

$(document).ready(function() {
  $('body').css('display', 'none');
  $('body').fadeIn(2000);

  $('a').click(function() {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(2000, newpage);
  });

  function newpage() {
    window.location = newLocation;
  }
});
4

3 に答える 3

0

HTML

<body style="display:none;">
content
</body>

JS

function redirectPage() {
  window.location = linkLocation;
}


$(document).ready(function() {

$("body").fadeIn(600);

$('a').click(function(event) {
    if (this.href == "" || this.href == null) {
      event.preventDefault();
      return;
    }
    if ((this.href.indexOf("#") == -1) && (this.href.indexOf("mailto:") == -1) && (this.href.indexOf("javascript:") == -1) && (this.target != "_blank")) {
      event.preventDefault();
      linkLocation = this.href;
      $("body").fadeOut(600, redirectPage);
    }
  });

});
于 2013-07-29T16:47:59.660 に答える
0

willの提案を試してみてください。これを実現する最善の方法は、ページ全体のリロードを防ぐことです。Ajaxまたは.load()関数を使用してください！"説明: サーバーからデータを読み込み、返された HTML を一致した要素に配置します。" コンテンツが読み込まれたら、フェードインします。

于 2013-07-29T16:23:33.697 に答える
0

これを試して：

あなたのナビゲーションリンクは次のとおりです。

<a href="nextPage.html" class="switch">My LINK</a>

次に、jquery コードは次のようになります。

$(document).ready(function() {

    $('body').css('display', 'none');

    $('body').fadeIn(2000);

    $('a.switch').click(function(event) {

        event.preventDefault();

        newLocation = this.href;

        $('body').fadeOut(2000, newpage);

    });

    function newpage() {

        window.location = newLocation;

    }

});

イベントを引数として関数に入れることを忘れないでください。

それが役に立てば幸い！

于 2013-07-29T16:04:27.160 に答える