Question

我有一个关于Jquery的问题，我试图抛出一个状态框，显示成功保存给最终用户。

我的问题是，在显示后我无法点击任何输入字段，因为div opacity设置为0而不是显示none，这是我的代码：

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);


    }
}

Answer 1

使用

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

代替。在淡入0后，它会淡化为0或1并隐藏（display：none）元素。

Answer 2

jQuery的fadeTo有一个回调事件

.fadeTo( duration, opacity [, callback] )

所以你可以做到

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

在fadeTo的末尾设置display：none。

Answer 3

.fadeTo不会更改显示样式。如果您希望将显示更改为无，请使用.fadeOut()和.fadeIn()

Answer 4

正如其他人所说，您可以使用.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);
}

的变化：

删除对未声明的变量n的需要，这是一个隐含的全局
在条件
将所有其他常用代码移到条件之外而不是重复两次
使用jQuery链接，以便$("#messageBoxSuccess")或`$（“＃messageBoxError”）仅评估一次。
切换到.fadeOut()和.fadeIn()，以便在动画之前/之后自动隐藏/显示内容。

不透明度0后，Jquery显示无

4 个答案: