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 内に「Success」というテキストが表示され、アニメーションが実行され、表示とともに消えます: なし。

最後に 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 に答える