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. 在条件中设置“SUCCESS”或“ERROR”和消息框ID
  3. 将所有其他通用代码移到条件之外，而不是重复两次
  4. 使用 jQuery 链接，以便$("#messageBoxSuccess")`$("#messageBoxError") 只计算一次。
  5. 切换到.fadeOut()等.fadeIn()内容在动画之前/之后自动隐藏/显示。
于 2012-11-12T17:11:34.080 回答