Recargar animación con JavaScript / Tabs / Iframe

I´m having a problem. I make 4 tabs using jquery, and on each tab, i open an iframe, calling another html, that have a javascript code with css3 animation.

But, there is my problem. Once you load the page, the first tab is already "open", so, that animation starts rolling. But, when i change tabs or come back to the first one, all the animations are already done...

I need the animations, to start ONLY when i open the tab, and, start over again when i come back to another tab that has already been seen.

Since the css3 code and js are too big, there´s the link to my working(problem) tabs.

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

ps: only works on SAFARI (i´m made it that way, i just need to get it working on safari).

¡¡Gracias!!


Noticias
Ok, now this just start when i click on the Tab, i add this on my parent code:

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

And in the html i add this:

<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>

But, when i come back to a tab that have already been opened, it dont do the animation again.... what can i change now??

The new code url: http://www.efdutra.com/testes/new/abas_final.html

¡Gracias!

preguntado el 01 de febrero de 12 a las 01:02

1 Respuestas

If you move your animation script into a function, you can call that from parent window.

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

Then you can bind an event when the user changes tabs on the parent window

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

you will need to add id's to the iframes so you can select them using this method.

Respondido 01 Feb 12, 05:02

But my animation script is already a function, called start(). But, thats the same script for all 4 tabs... can be because of that the problem? (i mean, is the same script, but in different htmls) Here, i make what you said, take a look, nothing working.... still the same problem... =/ efdutra.com/testes/new/abas_final.html - efdutra

This seems to be working for me. The animation only runs when I show the tab. All that's left to do is 'reset' the animation when I leave a tab so that it can play from the beginning when I go back to it. - SynXsiS

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.