jQuery slideToggle()/slideUp() not hiding completely (1px height remains)

Question

If you run the snippet below and you click on a single expand, you will see that one table's row gets expanded (well its contents do). When the expand is clicked again, the table's row will completely disappear (which is the desired output).

The issue, however, exists with the expand all. When expand all is clicked, they all expand as anticipated. When this is clicked again, they are collapse (slideToggle'd out of sight), except they aren't really. One pixel in height remains for all the table rows except the last one. I am not sure how to fix this issue. The table cell is not being set to display:none properly.

If you run the snippet you can see what I mean. The desired output would to not have the remaining pixel in height for the table-cell elements

var animationSpeed = 600;
$(".expand").css({
    "padding": "0em"
});
$(".expand").click(function () {
    expandTable($(this));
});
$(".expandAll").click(function () {
    $(".expand").each(function () {
        expandTable($(this));
    });
});

function expandTable($this) {
    $el = $(".slideDown[data-id='" + $this.data("id") + "']").children("td");
    if ($el.css("display") == "none") {
        $el.stop().css({
            "padding": 0
        }).show().animate({
            "padding": "0.5em"
        }, animationSpeed);
        $el.children("div").stop().slideDown({
            duration: animationSpeed
        });
        $this.find("span").html("Collapse");
        var set_baseHeight = setTimeout(function () {
            baseHeight = $("#content").height();
            //clearTimeout(set_baseHeight);
        }, animationSpeed);
    } else {
        $el.stop().animate({
            "padding": 0
        }, animationSpeed, function () {
            $el.hide();
        });
        $el.children("div").stop().slideToggle({
            duration: animationSpeed
        });
        $this.find("span").html("Expand");
        var set_baseHeight = setTimeout(function () {
            baseHeight = $("#content").height();
            $el.children("div").css({
                "display": "none"
            });
            $el.css({
                "display": "none"
            });
            //clearTimeout(set_baseHeight);
        }, animationSpeed);
    }
}

table th, table td {
    border:1px solid black;
}
.expand, .expandAll {
    text-align:center;
    padding:0.5em;
    cursor:pointer;
}
.expand, .expandAll {
    background-color:rgba(0, 100, 0, 0.3);
}
.expand:hover, .expandAll:hover {
    background-color:rgba(0, 200, 0, 0.4);
}
.slideDown>td {
    display:none;
    background-color:rgba(0, 0, 0, 0.2);
}
.slideDown>td>div {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
            <th>Fourth</th>
            <th class="expandAll">Expand all</th>
        </tr>
    </thead>
    <tbody>
        <tr class="slideDownHandler">
            <td>0</td>
            <td>25</td>
            <td>75</td>
            <td align="center">100</td>
            <td rowspan="2" class="expand" data-id="0"><span>Expand</span>

            </td>
        </tr>
        <tr class="slideDown" data-id="0">
            <td colspan="4">
                <div>
                    <table width="100%">
                        <thead>
                            <th>Thing 1</th>
                            <th>Stuff 1</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Stuff</td>
                                <td align="center">Content</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        <tr class="slideDownHandler">
            <td>0</td>
            <td>25</td>
            <td>75</td>
            <td align="center">100</td>
            <td rowspan="2" class="expand" data-id="1"><span>Expand</span>

            </td>
        </tr>
        <tr class="slideDown" data-id="1">
            <td colspan="4">
                <div>
                    <table width="100%">
                        <thead>
                            <th>Thing 2</th>
                            <th>Stuff 2</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Stuff</td>
                                <td align="center">Content</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

Fixed the issue with callbacks rather than setTimouts

function expandTable($this) {
    $el = $(".slideDown[data-id='" + $this.data("id") + "']").children("td");
    if ($el.css("display") == "none") {
        $el.stop().css({
            "padding": 0
        }).show().animate({
            "padding": "0.5em"
        }, animationSpeed);
        $el.children("div").stop().slideDown({
            duration: animationSpeed,
            complete: function () {
                baseHeight = $("#content").height();
            }
        });
        $this.find("span").html("Collapse");
    } else {
        $el.children("div").stop().slideToggle({
            duration: animationSpeed
        });
        $el.stop().animate({
            "padding": 0
        }, {
            duration: animationSpeed,
            complete: function () {
                $(this).hide();
            }
        });
        $this.find("span").html("Expand");
    }
}

https://jsfiddle.net/cm7v2708/9/