javascript - 为什么这个简单的 jQuery block 不起作用？

Question

jQuery:

$(document).ready( function() {
    $("#links .button").click(function() {
        var id = $(this).attr("id") + "-fade";
        $("#sliding-blocks").fadeOut(100);
        $("#" + id).fadeIn(300);
    });
});

和简化的 HTML:

<table id="links">
    <tr>
        <td>
            <div id="projects" class="button">
                Projects
            </div>
        </td>
    </tr>
</table>

<table id="sliding-blocks">
    <tr>
        <td>
            <span id="projects-fade" class="block">
                <img class="icon" src="github.png" height="20" width="20" />
            </span>
        </td>
    </tr>
</table>

非简化的 HTML 在 #links 和 #sliding-blocks 中包含更多条目，但都遵循相同的“淡入淡出”命名约定。

出于某种原因，我无法使用任何东西(甚至无法使用我可以使用的东西)。是的，我已经加载了 jQuery。

解决方法:

$(document).ready( function() {
    var blocks = ["projects-fade", "blog-fade", "online-fade", "resume-fade"];
    $("#links .button").click(function() {
        var id = this.id + "-fade";
        $("#sliding-blocks").fadeOut(100,function() {
            $.each(blocks, function() {
                $("#" + this).hide();
            });
            $("#" + id).show();
            $(this).fadeIn(300);
        });
    });
});

Answer 1

您淡出 #sliding-blocks 表格，并淡入其中的一个元素，但表格本身仍然淡出。您应该淡出所有 .block 元素，然后淡入您想要的元素，让表格始终可见。