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消失。

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

有人知道这会是什么吗？或者我如何能够以不同的方式实现相同的结果呢？

感谢。

Answer 1

“文本甚至没有显示”，因为display: none没有等待动画完成。在动画结束后，您需要使用动画的回调函数来计划事物。

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

Answer 2

由于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/

为什么这会发生在我的jquery ui动画中？

2 个答案: