Fade out one table and replace with another using

2019-09-04 11:23发布

站内问答 / 前沿技术
2003 4 6

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.

4条回答
beautiful°
2楼-- · 2019-09-04 11:51

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>
查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
3楼-- · 2019-09-04 12:00

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

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
4楼-- · 2019-09-04 12:04

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.

查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
5楼-- · 2019-09-04 12:04 
<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)