Question

The jQuery:

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

And the simplified 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>

The non-simplified HTML contains more entries in #links and #sliding-blocks, but all following the same “fade” naming convention.

For some reason, I can’t get anything to work (not even something I can work from). And yes, I’ve loaded jQuery.

Solution:

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

Because you’ve faded out an ancestor of the element you’re trying to fade in.

When the ancestor is faded out, none of its descendants will be visible.

I assume you’re looking for something like this…

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