Jquery悬停方法行为异常

Question

$(".panel-top").hover(rollOut, hideStatus);

function rollOut() {
    $(".panel-top").css("width", "100px").on("transitionend", showStatus);
}

function showStatus() {
    $(".panel-top-status").css("opacity", "1");
}


function rollIn() {
    $(".panel-top").css("width", "20px");
}

function hideStatus() {
    $(".panel-top-status").css("opacity", "0").on("transitionend", rollIn);
} 

以上是我现在玩了好几个小时的代码。当我将鼠标悬停在它上面时，我需要.panel-top才能展开。完成展开后，.panel-top-status应该可见。它位于顶部面板上。这部分工作正常。 当我从顶部面板中移除鼠标时，它会按预期折叠。状态也逐渐消失，但它几乎瞬间再次出现。 我尝试了不同的方法 - mouseover，mouseenter，mouseout，mouseleave。他们都有不同的错误。到目前为止hover方法效果最好，但它仍然有这个错误。 这是我codepen的链接。 我究竟做错了什么？请帮忙......