0

Jquery に関して質問があります。保存が成功したことを示すステータス ボックスをエンド ユーザーに表示しようとしています。

私の問題は、表示された後、divの不透明度が表示されずに0に設定されているため、入力フィールドをクリックできないことです。ここに私のコードがあります:

function messageBox(x){

n = x.indexOf('SUCCESS');

    if(n!==-1){
        $("#messageBoxSuccess").text(x.replace('SUCCESS', ''))
        $("#messageBoxSuccess").fadeTo(1000, 1);
        $("#messageBoxSuccess").delay(500);
        $("#messageBoxSuccess").fadeTo(1000, 0);

    }else{
        $("#messageBoxError").text(x.replace('ERROR', ''))
        $("#messageBoxError").fadeTo(1000, 1);
        $("#messageBoxError").delay(500);
        $("#messageBoxError").fadeTo(1000, 0);


    }
}
4

4 に答える 4

3

使用する

$("#messageBoxSuccess").fadeIn(500, function() { });
$("#messageBoxSuccess").fadeOut(500, function() { });

代わりは。これは、0 または 1 にフェードし、0 へのフェードが完了すると要素を非表示 (表示: なし) にします。

于 2012-11-12T17:02:05.323 に答える
2

jQueryのfadeToにはコールバックイベントがあります

.fadeTo( duration, opacity [, callback] )

あなたができるように

$("#messageBoxError").fadeTo(1000, 0, function(){ $(this).hide() });

設定するには、fadeTo の最後に display: none を指定します。

于 2012-11-12T17:02:34.310 に答える
0

.fadeTo表示スタイルを変更しません。表示をなしに変更したい場合は、 と を使用.fadeOut()します。.fadeIn()

于 2012-11-12T17:02:07.800 に答える
0

他の人が言ったように、コンテンツを自動的に非表示/表示するには.fadeIn()、 とを使用できます。.fadeOut()次のようにコードをクリーンアップすることもできます。

function messageBox(x){
    var replaceText, msgBoxId;

    if (x.indexOf('SUCCESS') !== -1) {
        replaceText = "SUCCESS";
        msgBoxId = "#messageBoxSuccess";
    } else {
        replaceText = "ERROR";
        msgBoxId = "#messageBoxError";
    }

    $(msgBoxId).text(x.replace(replaceText, ''))
        .fadeIn(1000).delay(500).fadeOut(1000);
}

変更点:

  1. n暗黙的なグローバルであった宣言されていない変数の必要性を取り除きます
  2. 条件付きで「成功」または「エラー」とメッセージ ボックス ID を設定します
  3. 条件を 2 回繰り返すのではなく、他のすべての一般的なコードを条件の外に移動します。
  4. $("#messageBoxSuccess")or `$("#messageBoxError") が 1 回だけ評価されるように、jQuery チェーンを使用します。
  5. に切り替えて.fadeOut()、.fadeIn()アニメーションの前後にコンテンツを自動的に非表示/表示にします。
于 2012-11-12T17:11:34.080 に答える