複数のCSSアニメーションを切り替えるJavascriptボタン

Question

現在、ホバーでアクティブになるフリップアニメーションを持つ一連のコンテナがあります。私は彼らがホバリングだけでなく、javascriptのボタンをクリックしてすべてのフリップを切り替えるには、単一のボタンを使用してアクティブにすることができますしたいと思います。

HTML：

これらは私が使用して、次のCSSに依存している限り多くのオブジェクトに対して繰り返される

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
      <div class="flipper"> 
       <div class="front"> 
        <a href="link1.html"> 
         <img src="images/frontimg1.jpg"/> 
        </a> 
       </div> 
       <div class="back"> 
        <div class="fliplinks"> 
         <a href="link1.html"> 
          <p>text1</p> 
         </a> 
        </div> 
       </div> 
      </div> 
     </div> 

：

.flip-container { 
    float:left; 
    margin: 7.5px; 
} 
/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000px; 
} 
/* flip the pane when hovered */ 
.flip-container:hover .flipper, .flip-container.hover .flipper { 
    transform: rotateY(180deg); 
} 

.flip-container, .front, .back { 
    width: 210px; 
    height: 210px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
} 

編集： jsfiddle要求されるように：https://jsfiddle.net/futbyyef/

Answer 1

彼らはすべて.flip-containerクラスを持っていると仮定すると、このような関数を追加することができます。

<script> 
    $('.toggle-button').click(function(){ 
     $('.flip-container').toggleClass('hover'); 
    } 
</script> 

次に、ボタンを押して切り替えます。何かが好きです

<button class="toggle-button">Test Button</button> 

ここにはfiddleがあります。あなたのページにjQueryを含めてください。