使用JavaScript/Tabs/Iframe重新加載動畫

我有問題。我使用jquery製作了4個選項卡，並且在每個選項卡上，我打開一個iframe，調用另一個html，它具有帶css3動畫的javascript代碼。使用JavaScript/Tabs/Iframe重新加載動畫

但是，這是我的問題。一旦你加載頁面，第一個選項卡已經「打開」，所以，該動畫開始滾動。但是，當我改變標籤或回到第一個，所有的動畫已經完成...

我需要的動畫，開始只有當我打開標籤，並重新開始，當我回來到另一個已經看到的標籤。

由於css3代碼和js太大，所以有鏈接到我的工作（問題）選項卡。

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

PS：僅適用於SAFARI（i'm做出這樣的說法，我只需要得到它的工作在Safari）。

謝謝！

更新
好了，現在這只是當我在選項卡上單擊開始，我加入這個在我父代碼：

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>

但是，當我回到已經打開的標籤，它不再做動畫....我現在能改變什麼？

新的代碼網址： http://www.efdutra.com/testes/new/abas_final.html

謝謝！

來源

2012-02-01 efdutra

如果將動畫腳本移動到某個函數中，則可以從父窗口調用該函數。

/* 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(); 
}

然後，當用戶改變父窗口

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

您需要的ID添加到I幀，因此您可以使用此方法選擇它們的標籤可以綁定一個事件。

來源

2012-02-01 01:57:00 SynXsiS

但我的動畫腳本已經是一個名爲start（）的函數。但是，這就是所有4個選項卡的相同腳本...可能是因爲這個問題？（我的意思是，是相同的腳本，但在不同的htmls）在這裏，我讓你說，看看，沒有工作....仍然是同樣的問題... =/ http：// efdutra .com/testes/new/abas_final.html – efdutra 2012-02-01 11:52:03

這似乎對我有用。只有在顯示選項卡時，動畫纔會運行。剩下要做的就是在我離開選項卡時「重置」動畫，以便在我回到最初時播放它。 – SynXsiS 2012-02-02 01:01:32

使用JavaScript/Tabs/Iframe重新加載動畫

回答

相關問題