使用 jquery 淡出一个表并用另一个表替换？

Question

我在这里搜索到了一些类似的主题，但我无法根据我的具体情况调整它们。我有一个简单的单页网站（嗯，我希望它是一个单页），顶部附近有五个超链接。我为每个链接显示五个不同的表，而不是为每个表创建一个新页面并使用指向它们的常规链接我认为在同一页面上淡出一个表并淡入其他表会很好，具体取决于明显点击了哪个链接。

所以默认页面的顶部会有导航：

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

那么默认情况下table1会显示在页面上：

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

其他四张桌子将被隐藏。然后，如果点击表 2 的链接，表 1 淡出，表 2 淡入，其他四个表/链接也一样

所以问题是，我需要什么 jQuery？我知道我需要使用淡入/淡出和replaceWith，但我没有成功尝试修改我在这里找到的其他一些示例。一些具有多个表的具体示例将不胜感激。

Answer 1

不要重新发明轮子，使用 jQuery UI 之类的东西。在此处查看Effect 的示例：http://jqueryui.com/effect/。请注意，它可以为您带来几种不同的效果。找到喜欢的效果后可以点击“查看源码”链接抓取代码。

Answer 2

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

Answer 3

首先，在不同的 HTML 元素上使用相同的标识符并不是一个好习惯：

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

您必须在导航上设置点击事件或将处理程序明确指定为属性：

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

然后定义处理程序：

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

已编辑：让浏览器等到可见表淡出后再开始淡入另一个表

Answer 4

只需将slideDown 更改为fadeIn，将slideUp 更改为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>