Fading between elements

Question

I'm really new to JavaScript and JQuery but I'd like to fade the data between my differebt tables. So if I had data that I wanted to break apart into 3 different tables, how do I go about paging through them, pausing 10 seconds, then paging to the next table, then cycle back to the beginning?

Could someone give me a hand or point me to something that will work?

<table>
<tr>
<td>table 1</td>
</tr>
</table>

<table>
<tr>
<td>table 2</td>
</tr>
</table>

<table>
<tr>
<td>table 3</td>
</tr>
</table>

Kraz · Accepted Answer · 2011-05-16T13:25:38.833

1

<style>
table {border:1px solid #ff00ff; position: absolute;top:0;display:none; }
div {position:relative;}
</style>
<script src="jquery-1.4.1.min.js"></script>
<script>
    var n = 0;
    function rotate(){
        $("table").fadeOut(100);
        $("table:eq("+n+")").fadeIn(1000);
        n += 1; n %= $("table").length;
    }

    //call your function every x milliseconds
    window.setInterval(function(){
        rotate();
    }, 1000);
</script>

<div>

<table style="display:block"><tr><td>content 1</td></tr></table>
<table><tr><td>content 2</td></tr></table>
<table><tr><td>content 3</td></tr></table>

</div>

Edited: now fully work, do not require any hard-coded limit.

edited May 16 '11 at 13:25

answered May 16 '11 at 12:33

Kraz

6,910
6
42
70

Thanks Kraz, I tried it out but I think there is an issue. Is this line correct? `$("table:eq(tablen).fadeIn(1000)");` The timer isn't working. – jim May 16 '11 at 12:44
I'm not 100% sure you can put a variable in :eq(). The example I based my answer was slightly different. Like this : `if (tablen==0) { $("table").fadeOut(100);$("table:eq(0)").fadeIn(100);} ` repeat for tablen = 2 and 3 (if/else if...) . – Kraz May 16 '11 at 12:49
OK, would you know what I need to do to fix it? I'm sorry I'm such a noob. – jim May 16 '11 at 12:51
I see what you mean. The thing is, there is no way of telling how many elements (tables) there will be to rotate the content. Will this example still work for me? – jim May 16 '11 at 12:54
I used your updated code in your last message and the timer is now working. Thank you. I'm not able to see the first element. Once the data leaves, it never comes back. – jim May 16 '11 at 12:56
I had forgot to include code to manage `tablen` value but it's quite simple : you increment its value (`tablen++;`) except for the last table where it goes back to zero (`tablen=0;`. To answer your question about the "how many element", try `window.alert($('table').length);`. For the first element, just remember that :eq is a 0-based index ;) – Kraz May 16 '11 at 12:58
Thanks Kraz, I made some changes and the timer now works. I can't get the thing to rotate back to the first element. Should I add the `tablen++;` next to `tablen += 1; tablen %= 3;`? I'm not sure where it goes. – jim May 16 '11 at 13:02
`tablen++;` and `tablen+=1` do exactly the same thing. `tablen%=3` is not needed if you simply put a `tablen=0`for your last element. – Kraz May 16 '11 at 13:07
Thanka Kraz. Here is what I have: `tablen += 1; tablen=0;`. Is this correct? The timer stopped working. Sorry man. – jim May 16 '11 at 13:12