Перезагрузить анимацию с помощью JavaScript / Вкладки / Iframe

Question

У меня проблема.Я делаю 4 вкладки, используя jquery, и на каждой вкладке открываю iframe, вызывающий другой html, который имеет код javascript с анимацией css3.

Но есть моя проблема.Как только вы загрузите страницу, первая вкладка уже «открыта», так что анимация начинает вращаться.Но когда я меняю вкладки или возвращаюсь к первой, все анимации уже сделаны ...

Мне нужны анимации, чтобы запускаться ТОЛЬКО при открытии вкладки, и начинать заново, когда явернитесь к другой вкладке, которая уже была замечена.

Поскольку код css3 и js слишком велики, есть ссылка на мои рабочие (проблемные) вкладки.

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

ps: работает только на 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>

Но когда я возвращаюсь к уже открытой вкладке, она не выполняет анимацию снова ... что я могу изменить сейчас ??

Новый код URL: 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();
}

вам нужно добавить идентификаторы в iframes, чтобы вы могли выбирать их, используя этот метод.