JavaScript /タブ/ Iframeを使用したアニメーションの再読み込み

Question

問題が発生しています。私はjqueryを使用して4つのタブを作成し、各タブで、私はcss3アニメーションでJavaScriptコードを持って、別のHTMLを呼び出すiframeを開きます。

しかし、私の問題があります。ページをロードすると、最初のタブはすでに開いているので、アニメーションが回転し始めます。しかし、タブを変えたり、最初のアニメーションに戻ったりすると、すべてのアニメーションは既に完了しています。

私はアニメーションが必要です。タブを開くときにのみ起動し、既に見られている別のタブに移動します。

css3コードとjsが大きすぎるため、作業中の（問題の）タブへのリンクがあります。

http://efdutra.com/testes/abas_final.html

PS：唯一のSafariで動作します（ - 私はそのように作られた、私はちょうどそれがサファリに取り組んで取得する必要があります）。

ありがとうございます！

---

更新
[OK]を、今、これはちょうど私がタブをクリックしたとき、私は私の親のコードでこれを追加開始：

function divStart1(){ 
      document.getElementById('teste1').contentWindow.start(); 
     }; 

     function divStart2(){ 
      document.getElementById('teste2').contentWindow.start(); 
     }; 

     function divStart3(){ 
      document.getElementById('teste3').contentWindow.start(); 
     }; 

     function divStart4(){ 
      document.getElementById('teste4').contentWindow.start(); 
     }; 

、私はこれを追加し、HTMLで：

<a href="#tab1" onclick="divStart1();"><img src="img/001_a.png"></a> 
      <a href="#tab2" onclick="divStart2();"><img src="img/002_b.png"></a> 
      <a href="#tab3" onclick="divStart3();"><img src="img/003_b.png"></a> 
      <a href="#tab4" onclick="divStart4();"><img src="img/004_b.png"></a> 

しかし、すでに開いているタブに戻ると、アニメーションをもう一度やり直すことはできません...私は今変更できますか？

新しいコードのURL： http://www.efdutra.com/testes/new/abas_final.html

ありがとう！

Answer 1

アニメーションスクリプトを関数に移動すると、それを親ウィンドウから呼び出すことができます。ユーザーはあなたがこの方法を使用して、それらを選択することができるように、アイフレームにidを追加する必要があります親ウィンドウ

function OnTabSelected(){ 
    document.getElementById('ID of iframe here').contentWindow.Animate(); 
} 

のタブを変更したときに

/* This is in your child page */ 
function Animate(){ 
    // Do animation 
    // To restart css animation I assume you have to remove a class and add it again? 
} 

$(document).ready(function(){ 
    Animate(); 
} 

次に、あなたがイベントをバインドすることができます。