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元素，然后淡入您想要的元素，让表格始终可见。

Answer 2

因为你已经淡出了你试图淡入的元素的祖先。

当祖先淡出时，其后代都不可见。

我认为你正在寻找类似的东西......

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

Answer 3

你正在隐藏滑块，然后你试图淡化它的子元素。这不会起作用，因为父容器滑块是不可见的

为什么这个简单的jQuery块不能正常工作？

3 个答案: