0

jquery の学習を開始し、いくつかのページのフェードインとフェードアウト メソッドを配置しました。私のローカルホストでは問題なく動作します。サーバーに置くと、トランジション効果がスムーズではありません。次のページに移動する前に本文のコンテンツがフェードアウトし、フッター部分が表示され、次のページに移動した後にヘッダーが途切れます。

すべてのページで次のコードを使用しています

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript">
$(function(){
  $('#matter1').hide().fadeIn(2000);
  $('a.nav_font').click(function(){
      var link = $(this).attr('href');
      $('#matter1').fadeOut(1000, function(){
          window.location.href = link;
      });
      return false;
   });
 });
</script>
4

1 に答える 1

0

$(function() { ... })DOM の準備ができたときに関数を実行します。残念なことに、ブラウザーはコンテンツが読み込まれるときにコンテンツをレンダリングするため、全体的な効果は、ブラウザーがドキュメントを読み込むときにレンダリングし、読み込まれた後に非表示にしてフェードインすることです。

これはローカル マシンでは表示されませんでした。これは、コンテンツの読み込みが非常に高速であるため、コードが実行される前にブラウザーが段階的にレンダリングする機会を得られない可能性があるためです。遅延がある実際のサーバーでは、ブラウザは DOM の準備が整う前にレンダリングする可能性があります。

オン DOM 対応のコールバックを非表示にするトリガーとして使用するのではなく、内部で絶対に最初に非表示にしてみてください#matter1。

<div id="matter1">
    <script type="text/javascript">
        $("#matter1").hide();
    </script>
    ...

その後、存在するとすぐ#matter1に非表示になります。次に、DOM 対応ハンドラーで、.hide()が不要になったことを除いて、以前と同じようにすべてを行います。

于 2013-06-28T03:48:22.610 に答える