0

http://jsfiddle.net/9WsnA/

Currently, the transition is triggered by hovering over the container div just to show you what I am trying to accomplish. I'd like to create link1 and link2 above the container div to trigger these transitions where link1 would obviously display the first div and link2 would slide it over to the second 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 回答