jquery頁面過渡效果正在影響下面的所有div

我試圖按照教程創建平滑的頁面過渡。它工作正常，但每當我嘗試添加一個新的div下面的效果，它也得到了效果。jquery頁面過渡效果正在影響下面的所有div

這是腳本：

$(function() { 
 
    var request = window.location.hash; 
 
    if(request == '#page-2') { 
 
     $('.page.current').removeClass('current'); 
 
     $('.page').eq(1).addClass('current'); 
 
    } 
 
    $('nav a').click(function(){ 
 
     var speed = 200; 
 
     var i = $(this).index(); 
 
     $('.page.current').animate({opacity: 0, marginTop:80},speed,function(){ 
 
      $(this).removeClass('current'); 
 
      $('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop: 50},speed).addClass('current'); 
 
     }); 
 
    }); 
 
});

這是頁面的HTML和CSS（頁腳是有問題的DIV）。

html { 
 
    overflow-y:scroll; 
 
} 
 

 
body > div, nav { 
 
    width:640px; 
 
    margin:auto; 
 
    margin-top:50px; 
 
} 
 

 
.page { 
 
    display:none; 
 
    opacity:0; 
 
} 
 
.page.current { 
 
    display:block; 
 
    opacity:1; 
 
}

<!doctype html> 
 
    <html lang=lipsum> 
 
    <head> 
 
     <meta charset=utf-8> 
 
     <title>smooth page transition</title> 
 
     <link rel=stylesheet href='style.css'> 
 
    </head> 
 
    <body> 
 
     <nav> 
 
      <a href='#page-1'>first page</a> 
 
      <a href='#page-2'>second page</a> 
 
     </nav> 
 
     <div class='page current'> 
 
      page1 
 
     </div> 
 
     <div class='page'> 
 
      page2 
 
     </div> 
 
<div id='footer'> 
 
THIS GETS THE SAME EFFECT!!! 
 
</div> 
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
     <script src="script.js"></script> 
 
    </body> 
 
    </html>

讚賞任何幫助。謝謝:)

來源

2016-01-08 Lana

喜@拉娜我有一點迷惑你想爲你的情況 –

我想有頁腳div來沒有過渡效果，當我點擊菜單按鈕做什麼。現在，當我點擊按鈕時，頁腳會產生效果，這與頁面執行的方式相同。 – Lana

** [類似這樣]（https://jsfiddle.net/Guruprasad_Rao/dwpL4jL0/）**？ –

這是你的代碼，我只是修改你的代碼中的一行，希望它是你想要的。謝謝，威利
PS：我只是鎖定你的位置，請修改你的左邊的PX其他。

  =========================================================================== 
      <!-- <div class='page current' STYLE="position:absolute;left:500px;">--> 
      =========================================================================== 


     <!doctype html> 
     <html lang=lipsum> 
     <head> 
      <meta charset=utf-8> 
      <title>smooth page transition</title> 
      <link rel=stylesheet href='style.css'> 
<style> 
      html { 
     overflow-y:scroll; 
    } 

    body > div, nav { 
     width:640px; 
     margin:auto; 
     margin-top:50px; 
    } 

    .page { 
     display:none; 
     opacity:0; 
    } 
    .page.current { 
     display:block; 
     opacity:1; 
    } 
     </style> 
     </head> 
     <body> 
      <nav> 
       <a href='#page-1'>first page</a> 
       <a href='#page-2'>second page</a> 
      </nav> 
      <div class='page current' STYLE="position:absolute;left:500px;"> 
       page1 
      </div> 
      <div class='page'> 
       page2 
      </div> 
      <div id='footer'> 
       THIS GETS THE SAME EFFECT!!! 
      </div> 
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
      <script src="script.js"></script> 
      <input type="text" value="aa" /> 

     </body> 
    </html> 
    <script> 
     $(function() { 
      var request = window.location.hash; 
      if (request == '#page-2') { 
       $('.page.current').removeClass('current'); 
       $('.page').eq(1).addClass('current'); 
      } 
      $('nav a').click(function() { 
       var speed = 200; 
       var i = $(this).index(); 
       $('.page.current').animate({ opacity: 0, marginTop: 80, opacity: 0, marginBottom: 100 }, speed, function() { 
        $(this).removeClass('current'); 
        $('.page').eq(i).css('marginTop', 30).animate({ opacity: 1, marginTop: 20 ,opacity: 1, marginBottom: 70 }, speed).addClass('current'); 
       }); 
      }); 
     }); 

    </script>

來源

2016-01-08 03:45:28

非常感謝。不幸的是，每當我嘗試這個，然後在頁面中添加更多的文本，它仍然超過並在頁腳頂部寫入。我在想這個腳本有什麼問題，它的目標是一個不正確的div，或者類似的東西。 – Lana

jquery頁面過渡效果正在影響下面的所有div

回答

相關問題