Fade out one table and replace with another using jquery?

Question

I've found a few similar topics here searching but I've not been able to adapt them to my exact situation. I have a simple single page website (well, I want it to be a single page) with five hyperlinks near the top. I have five different tables to display for each link and rather than create a new page for each table and use regular links to them I thought it'd be nice to fade one table out and fade the others in on the same page, depending on which link is clicked obviously.

So the default page would have the nav at the top:

<a href="#" id="table1">Table 1</a>
<a href="#" id="table2">Table 2</a>
<a href="#" id="table3">Table 3</a>
<a href="#" id="table4">Table 4</a>
<a href="#" id="table5">Table 5</a>

Then by default table1 would show on the page:

<table id="table1">
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<table>

And the other four tables would be hidden. Then if the link to table 2 is clicked table 1 fades out and table 2 fades in, same for the other four tables/links

So the question is, what jQuery do I need for this? I know I need to use fadein/out and replaceWith but I've not been successful trying to modify some other examples I've found on here. Some specific examples with multiple tables would be appreciated.

score 0 · Answer 1 · answered Jan 07 '13 at 14:08

Don't reinvent the wheel, use something like jQuery UI. Check out the example for Effect here: http://jqueryui.com/effect/. Notice that there are several different effects that it can do for you. After finding the effect that you like you can click on the 'view source' link to grab the code.

semao · Answer 2 · 2013-01-07T14:42:56.160

0

First of all, it is not good practise to user the same identifier on different HTML elements:

<a href="#" id="table1">Table 1</a>`
<table id="table1">`

you have to set up a click event on navigation or specify handlers explicitly as attributes:

<a href="#" id="tableLink1" onclick="ShowTable(1)">Table 1</a>

and then define the handler:

function ShowTable(number)
{
    //fade out table that is shown
    $('table:visible').fadeOut('slow',function (){
        $('#table'+number).fadeIn('slow');
    });        
}

EDITED: make browser to wait until visible table is faded out before starting fading in the other table

edited Jan 07 '13 at 14:42

answered Jan 07 '13 at 14:08

semao

1,757
12
12

Yeah that was just a mistake with the basic example, my actual tables and link id's have unique IDs. I will try your solution now and report back. – Simon K Jan 07 '13 at 14:16
That works but the replacing table jumps slightly from below the current, fading out table. So i'll see Foo Bar Click the link and for a split second will see: Cheese Grille With a space where the table fading out is before the fading in table appears then moves up into the space. If that makes sense? – Simon K Jan 07 '13 at 14:22
You can wait until table fades out, then fire the fade in of other table. – semao Jan 07 '13 at 14:39
I tried the edited version and it doesn't work at all now, nothing happens when I click the link. I didn't change anything else, just the function. – Simon K Jan 07 '13 at 14:52

pictoru · Answer 3 · 2013-01-07T14:39:16.890

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(function(){
            var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;

            $(".hnd").click(function(e){
                e.preventDefault();

                if(sliding == true) return;

                sliding = true;

                var tblId = $(this).attr("href");

                if(!current){
                    $(tblId).slideDown(speed, function(){
                        current = tblId;
                        sliding = false;
                    });

                } else {
                    $(current).slideUp(speed, function(){
                        $(tblId).slideDown(speed, function(){
                            current = tblId;
                            sliding = false;
                        });
                    });
                }
            });
        });
    </script>

    <style type="text/css">
        .tbl{
            border: 1px solid;
        }
    </style>
</head>
<body>


<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>


<div id="table1" class="tbl">
    <table>
        <tr>
            <td>foo</td>
        </tr>
        <tr>
            <td>bar</td>
        </tr>
    </table>
</div>

<div id="table2" class="tbl">
    <table>
        <tr>
            <td>foo 2</td>
        </tr>
        <tr>
            <td>bar 2</td>
        </tr>
    </table>
</div>

<div id="table3" class="tbl">
    <table>
        <tr>
            <td>foo 3</td>
        </tr>
        <tr>
            <td>bar 3 </td>
        </tr>
    </table>
</div>

<div id="table4" class="tbl">
    <table>
        <tr>
            <td>foo 4</td>
        </tr>
        <tr>
            <td>bar 4</td>
        </tr>
    </table>
</div>

<div id="table5" class="tbl">
    <table>
        <tr>
            <td>foo 5</td>
        </tr>
        <tr>
            <td>bar 5</td>
        </tr>
    </table>
</div>

</body>
</html>

This works, thanks, but could it fadein/out rather than slide? — Simon K, Jan 07 '13 at 14:57

score 0 · Answer 4 · answered Jan 07 '13 at 16:03

Just change slideDown to fadeIn and slideUp to fadeOut.

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(function(){
            var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;

            $(".hnd").click(function(e){
                e.preventDefault();

                if(sliding == true) return;

                sliding = true;

                var tblId = $(this).attr("href");

                if(!current){
                    $(tblId).fadeIn(speed, function(){
                        current = tblId;
                        sliding = false;
                    });

                } else {
                    $(current).fadeOut(speed, function(){
                        $(tblId).fadeIn(speed, function(){
                            current = tblId;
                            sliding = false;
                        });
                    });
                }
            });
        });
    </script>

    <style type="text/css">
        .tbl{
            border: 1px solid;
        }
    </style>
</head>
<body>


<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>


<div id="table1" class="tbl">
    <table>
        <tr>
            <td>foo</td>
        </tr>
        <tr>
            <td>bar</td>
        </tr>
    </table>
</div>

<div id="table2" class="tbl">
    <table>
        <tr>
            <td>foo 2</td>
        </tr>
        <tr>
            <td>bar 2</td>
        </tr>
    </table>
</div>

<div id="table3" class="tbl">
    <table>
        <tr>
            <td>foo 3</td>
        </tr>
        <tr>
            <td>bar 3 </td>
        </tr>
    </table>
</div>

<div id="table4" class="tbl">
    <table>
        <tr>
            <td>foo 4</td>
        </tr>
        <tr>
            <td>bar 4</td>
        </tr>
    </table>
</div>

<div id="table5" class="tbl">
    <table>
        <tr>
            <td>foo 5</td>
        </tr>
        <tr>
            <td>bar 5</td>
        </tr>
    </table>
</div>

</body>
</html>

Fade out one table and replace with another using jquery?

4 Answers4

Linked