0

这是我的 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中的文本“成功”出现，做动画，然后随着显示消失：无。

如果我最后使用 display:none，文本甚至不会显示。如果我删除它，动画将起作用，但文本将保留在那里......如果有人选择它，那太可怕了，因为文本将被突出显示。

有谁知道这可能是什么？或者我怎样才能达到相同的结果但做不同的事情？

谢谢。

4

2 回答 2

2

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

$("#selector").animate({backgroundColor: colorCode}, 4000, function() {
 // callback function
 // only executes after animation is over
});
于 2013-09-13T20:26:34.290 回答
0

由于 JavaScript 的异步特性，animate 命令会启动动画，但它不会在执行下一行代码之前完成它。您想在完成动画后隐藏文本。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}, {
    duration: 4000,
    complete: function() {
        $(".menu_status_bar").hide();
    }
});

见：http ://api.jquery.com/animate/

于 2013-09-13T20:35:21.863 回答