Question

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

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

我需要动画，只有当我打开标签时才开始，当我回到已经看过的另一个标签时，重新开始。

由于css3代码和js太大，有指向我的工作（问题）标签的链接。

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

ps：仅适用于SAFARI（我是这样做的，我只需要让它在safari上工作）。

谢谢！

更新
好的，现在这只是在我点击Tab时开始，我在我的父代码上添加：

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

然后，当用户更改父窗口上的选项卡时，您可以绑定事件

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

您需要在iframe中添加ID，以便您可以使用此方法选择它们。

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

1 个答案: