CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user623990
user623990

Reputation:

Why isn't this simple jQuery block not working?

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);
        });
    });
});

Upvotes: 0

Views: 841

Answers (3)

clem
clem

Reputation: 3366

you're hiding sliding-blocks and then your're trying to fade a child element of it in. that won't work as the parent container sliding-blocks is invisible

Upvotes: 2

user1106925
user1106925

Reputation:

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);
        });
    });
});

Upvotes: 2

Joe
Joe

Reputation: 15802

Your fade out the #sliding-blocks table, and fade in one element of it, but the table itself is still faded out. You should instead fade out all .block elements, then fade in the one you want, leaving the table visible all the time.

Upvotes: 3

Related Questions