Question

目前，通过将鼠标悬停在容器div上来触发转换只是为了向您展示我想要完成的任务。我想在容器div上面创建link1和link2以触发这些转换，其中link1显然会显示第一个div，而link2会将它滑动到第二个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>

Answer 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的一些行

Answer 2

选中此fiddle

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

根据需要更新...

CSS3过渡：如何通过链接触发此事件？里面的JSFiddle演示

2 个答案: