javascript - 使用 JavaScript/Tabs/Iframe 重新加载动画

Question

我有一个问题。我使用 jquery 创建了 4 个选项卡，在每个选项卡上，我打开一个 iframe，调用另一个 html，它有一个带有 css3 动画的 javascript 代码。

但是，这是我的问题。加载页面后，第一个选项卡已经“打开”，因此动画开始滚动。但是，当我更改选项卡或返回到第一个选项卡时，所有动画都已经完成...

我需要动画，仅在我打开选项卡时启动，并且在我返回到另一个已经看到的选项卡时重新开始。

由于 css3 代码和 js 太大，这里有指向我的工作(问题)选项卡的链接。

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

ps:只适用于 SAFARI(我是这样做的，我只需要让它在 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

谢谢!

Answer 1

如果将动画脚本移动到函数中，则可以从父窗口调用它。

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

然后当用户在父窗口上切换标签页时，你可以绑定(bind)一个事件

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

您需要将 id 添加到 iframe，以便您可以使用此方法选择它们。