javascript - Jquery トランジション

Question

このページで問題がありますhttp://ncca.co/indust.php

適切な a href を選択すると「コンテンツ」領域が表示され、次に黒いフッターが左からスイープされるようにします。リンクが選択されると、「コンテンツ」が消えて新しいコンテンツが表示され、右側にスイープする黒いバーにわずかなギャップがあり、新しい黒いボーダーが左からスイープします。

どうすればこれを達成できますか?

コードを投稿する方法がわかりません

Answer 1

一般的に、overflow:hidden に設定された「コンテンツ」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

それがあなたを正しい方向に向けることを願っています!