javascript - jQuery 转换

Question

我在这个页面有问题http://ncca.co/indust.php

我希望“内容”区域出现在选择适当的 a href 时，然后黑色页脚从左侧扫过。选择链接时，我希望“内容”消失，新的内容出现，向右扫过的黑条有一个轻微的间隙，新的黑色边框从左侧扫入。

我怎样才能做到这一点？

我不知道如何发布代码

Answer 1

通常，您需要做的是在“内容” div 内有一个非常宽的 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: //api.jquery.com/animate/

现场示例：http ://www.volunteerspot.com/Organizer/Register

希望这会为您指明正确的方向！