Making the first table already visible when fading with jquery

Question

I'm Sebastiano. I have an easy question similar to this topic:

"Fade out one table and replace with another using jquery?"

I've tried the code (the last one posted) and it works well, but i have some problems when i try to make the first table already visible when running the site: sometimes the first table remain visible and the others just appear beneath the first one.

Can someone help me with that? It will be great.

This is the code:

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

score 1 · Answer 1 · answered Jul 27 '13 at 14:31

1

$(".tbl").not(':first').hide();

answered Jul 27 '13 at 14:31

Shivam

2,208
3
24
39

Thanks, but the first table now is always visible. I'm trying to make the first one visible when opening the page, and when you press the other button the other table will have to fade in, in place of the the current table. – Sebastiano Jul 27 '13 at 14:37

score 0 · Accepted Answer · answered Jul 27 '13 at 14:39

Here's a fiddle http://jsfiddle.net/DMRyL/

@Shivam is correct in theory, but you need some extra code to make it work.

First set your var like this:

tbl = $(".tbl").not(':first').hide();

Then:

if(!current)
{
    current =  $(".tbl:first");
}
$(current).fadeOut(speed, function(){
    $(tblId).fadeIn(speed, function(){
        current = tblId;
        sliding = false;
    });
});

score 0 · Answer 3 · answered Jul 27 '13 at 14:51

You can add a class to your first table.

<div id="table1" class="tbl first">

Set your var as

tbl = $(".tbl").not(':first').hide()

The use following query in your click event.

if( $(document).find('.first') ) $('.first').hide(); //if class first is found hide it

score 0 · Answer 4 · answered Jul 27 '13 at 15:01

0

The simpler solution would be to add this line before the click function

$('#table1').fadeIn(speed);

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

answered Jul 27 '13 at 15:01

Samurai

3,724
5
27
39

Making the first table already visible when fading with jquery

4 Answers4