0

http://jsfiddle.net/9WsnA/

現在、私が達成しようとしていることを示すために、コンテナ div にカーソルを合わせるとトランジションがトリガーされます。コンテナー div の上に link1 と link2 を作成して、link1 が明らかに最初の div を表示し、link2 が 2 番目の div にスライドするこれらのトランジションをトリガーしたいと思います。

CSS

body {
    margin:0;
    padding:0;
    overflow-y:scroll;
    overflow-x:hidden;
    }

/* elements */

#serpcontainer {
    margin:0;
    width:200%;
    overflow:hidden;
    transition:all .2s ease-out;
    }
#serpcontainer:hover {
    margin:0 0 0 -100%;
    }
#serp1 {
    float:left;
    width:50%;
    background:pink;
    }
#serp2 {
    float:left;
    width:50%;
    background:cyan;
    }

/* animations */

@keyframes slide {
    from {
        margin:0 0 0 100%;
        }
    to {
        margin:0;
        }
    }

HTML

<body>
<div id="serpcontainer">
    <div id="serp1">
        1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
    </div>
    <div id="serp2">
        22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22
    </div>
</div>
</body>
4

2 に答える 2

1

このコードで試してください http://jsfiddle.net/9WsnA/6/

    $('.linkOne').click(function(){
        $('#serpcontainer').addClass('linkOneContent');
        $('#serpcontainer').removeClass('linkTwoContent');
    });
    $('.linkTwo').click(function(){
        $('#serpcontainer').addClass('linkTwoContent');
        $('#serpcontainer').removeClass('linkOneContent');
    });

css の一部の行を更新しました

于 2013-06-12T05:15:39.647 に答える
0

このフィドルをチェックしてください

document.getElementById("anc").addEventListener("click", function() {
   var serpcontainer = document.getElementById("serpcontainer");
   if (serpcontainer.className.indexOf("serp") > -1) {
       serpcontainer.className = "";
   }
   else {
       serpcontainer.className = "serp";
   }
}, false);

必要に応じて更新してください...

于 2013-06-12T04:45:35.787 に答える