jQuery的過渡

Question

我在本頁面http://ncca.co/indust.php

我想在「內容」區域出現在相應的A HREF，然後黑色的頁腳選擇從左側橫過掃有問題。當選擇鏈接時，我希望「內容」消失，並且新內容出現，向右掃動的黑條有一個溫和的間隙，新的黑色邊框從左側掃入。

我該如何做到這一點？

我不知道如何發佈代碼

Answer 1

一般地，你需要做的是被設置爲溢出「內容」 DIV中一個很寬的DIV：隱藏。然後，您將x值的偏移量設置爲動畫，以獲取要查看的div。

<style> 
    #container { 
     width: 100px; 
     overflow: none; 
     position: relative; 
    } 

    #inner { 
     width: 300%; 
     position: relative; 
     left: 0; 
    } 

    #container div { 
     width: 100px; 
     float: left; 
    } 
</style> 
<div id="container"> 
    <div id="inner"> 
     <div>Foo</div> 
     <div>Bar</div> 
     <div>Baz</div> 
    </div> 
</div> 
<a id="show_1">Link 1</a> 
<a id="show_2">Link 2</a> 
<a id="show_3">Link 3</a> 
<script> 
    $(document).ready(function() { 
     $("#show_1").click(function(){ 
      $("#inner").animate(
       {"left": 0} 
       1000 // Animate for 1 second 
      ); 
     }); 

     $("#show_2").click(function(){ 
      $("#inner").animate(
       {"left": 100} 
       1000 // Animate for 1 second 
      ); 
     }); 

     $("#show_3").click(function(){ 
      $("#inner").animate(
       {"left": 200} 
       1000 // Animate for 1 second 
      ); 
     }); 
    }); 
</script> 

文檔有生命在這裏：

活生生的例子在這裏：http://www.volunteerspot.com/Organizer/Register

希望指向你在正確的方向！