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.

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


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

function divStart1(){

        function divStart2(){

        function divStart3(){

        function divStart4(){

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:


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?


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

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.