javascript - 为什么我的 jquery ui 动画会发生这种情况？

Question

这是我的HTML代码

<div id="menu_status_item">
    <span class="menu_status_bar"></span>
</div>

这是我的 CSS:

#menu_status_item
{
    margin-top: 40px;
    width: 100%;    
}

.menu_status_bar
{
    margin-left: 45px;  
    color: #fff;    
}

这是我的jquery

var statusMessage = 'Success'
    var colorCode = '';
    var statusText = '';
    if(statusMessage.indexOf("Success") > -1) {
        colorCode = '#33CC33';
        statusText = 'Success';
    }else{
        colorCode = '#CC0000';
        statusText = 'Failure';
    }
    $(".menu_status_bar").css("display", "inline-table");
    $(".menu_status_bar").text(statusText);
    $("#menu_status_item").animate({backgroundColor: colorCode}, 4000);
    $("#menu_status_item").animate({backgroundColor: "#ffffff"});
    $(".menu_status_bar").css("display", "none");

基本上，我希望 menu_status_bar 中的文本“Success”出现，执行动画，然后随着显示消失:无。

如果我在末尾使用 display:none，文本甚至不会显示。如果我删除它，动画有效，但文本将保留在那里......如果有人选择它，它会很糟糕，因为文本将被突出显示。

有人知道这是什么吗？或者我怎样才能获得相同的结果，但方法不同？

谢谢。

Answer 1

“文本甚至不显示”是因为 display: none 没有等待动画完成。您需要使用动画的回调函数来安排动画完成后的事情。

$("#selector").animate({backgroundColor: colorCode}, 4000, function() {
 // callback function
 // only executes after animation is over
});