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

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