使用外部按钮控制CSS变换？

Question

需要关于一个按钮上的JavaScript帮助来触发这些转换，如滑块1,2,3和来回交替。就像苹果网站上的iPhone功能滑块一样。任何人？

的HTML：

<div id="anima-slide1"> 
    <div class="anima-text-slide1">Genuinity comes at a price.<br> 
    <font color="#f06">Will you pay it?</font></div> 
    <div class="anima-image-slide1"><img src="img/lowrider1.png" width="250" height="250"> </div> 
</div> 

<div id="anima-slide2"> 
    <div class="anima-text-slide2">Genuinity comes at a price.<br> 
    <font color="#f06">Will you pay it?</font></div> 
    <div class="anima-image-slide2"><img src="img/lowrider1.png" width="250" height="250"> </div> 
</div> 

<div id="anima-slide3"> 
    <div class="anima-text-slide3">Genuinity comes at a price.<br> 
    <font color="#f06">Will you pay it?</font></div> 
    <div class="anima-image-slide3"><img src="img/lowrider1.png" width="250" height="250"> </div> 
</div> 

的CSS（同为2和3）

.anima-text-slide1 { 
    margin-top:10px; 
    position:absolute; 
    font-family: 'BebasRegular'; 
    color:#FFF; 
    font-size:40px; 
} 
.anima-text-slide1 { 
    -webkit-backface-visibility: visible; 
    -webkit-transition: 900ms ease; 
    opacity: 0; 
    -webkit-transform: translate(-497px, 0px) rotate(0deg); 
} 
.anima-image-slide1 { 
    position:absolute; 
    left: 610px; 
    top: 0px; 
} 
.anima-image-slide1 { 
    -webkit-backface-visibility: visible; 
    -webkit-transition: 900ms ease; 
    opacity: 0; 
    -webkit-transform: translate(497px, 0px) rotate(0deg); 
} 

Answer 1

通过添加一个类的名字，你可以创建多个动画步骤。使用jQuery可以更容易地更改目标元素上的类名称。您可以将此技术应用于您的特定情况。

<div class="container"> 
Hello 
</div> 

<a href="javascript://" onclick="setFrame('frame1')">Frame 1</a> 
<a href="javascript://" onclick="setFrame('frame2')">Frame 2</a> 

JS：

function setFrame(frameName) { 
    $('.container').addClass(frameName); 
} 

CSS：

.container { 
    font-size:24px; 
}  
.frame1 { 
    font-size:48px; 
    -webkit-backface-visibility: visible; 
    -webkit-transition: 900ms ease; 
    opacity: 20; 
    -webkit-transform: translate(200px, 0px) rotate(0deg); 
} 
.frame2 { 
    font-size:64px; 
    color:#ff0000; 
    -webkit-backface-visibility: visible; 
    -webkit-transition: 900ms ease; 
    opacity: 20; 
    -webkit-transform: translate(0px, 150px) rotate(30deg); 
} 

编辑：

所以，如果你想要做多的元素，你可以做这样的事情：

.containerA .frame1 { 
... 
} 

.containerB .frame1 { 
...some different style... 
} 

然后：

function setFrame(frameName) { 
     $('.containerA').addClass(frameName); 
     $('.containerB').addClass(frameName); 
    }