输入类型按钮上的 jQuery fadeOut() 函数

Question

我的页面上有一个输入类型按钮，其 CSS 为：

input[type="button"] {
    width: 80%;
    margin: 0 auto;
    height: 50px;
    font-size: 18pt;
    font-weight: bold;
    background-color: transparent;
    border: 1px solid blue;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
}

input[type="button"]:hover {
    background-color: lightgreen;
    color: black;
    font-weight: bolder;
    border: 2px solid darkgreen;
    /*border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;*/
}

当您单击按钮时，它会通过 JQuery 更改颜色，然后它应该会淡出。一切正常，除了它淡出。它没有消失，而是消失了。这是我的 jQuery 代码...

 $('#process').click(function() {
        $(this).css({"background-color":"black", "color":"white"});

        $(this).fadeOut(800, function() {
            $.ajax({
                url: 'parser.php',
                dataType: 'text',
                type: 'post',
                data: $('#checkup-form').serialize(),
                success: function (data) {
                    $('#main').fadeOut('slow', function() {
                        $(this).html(data).fadeIn('fast');
                    });
                },
                error: function(error) {
                    alert('error; ' + eval(error));
                }
            });
        });
    });
});

它会等待时间，但不会褪色......它就像我使用隐藏功能一样消失并立即进入我的 ajax 调用。我试过注释掉 .css() 段，但这似乎并没有改变它。同样，它会暂停 800 或我在那里放置多长时间，但不会淡出，它会消失。

提前感谢您的帮助！

Answer 1

JS sn-p 有错误。我已经删除了最后一行，现在它消失了。

 $('#process').click(function() {
        $(this).css({"background-color":"black", "color":"white"});

        $(this).fadeOut(800, function() {
            $.ajax({
                url: 'parser.php',
                dataType: 'text',
                type: 'post',
                data: $('#checkup-form').serialize(),
                success: function (data) {
                    $('#main').fadeOut('slow', function() {
                        $(this).html(data).fadeIn('fast');
                    });
                },
                error: function(error) {
                    alert('error; ' + eval(error));
                }
            });
        });
    });

input[type="button"] {
    width: 80%;
    margin: 0 auto;
    height: 50px;
    font-size: 18pt;
    font-weight: bold;
    background-color: transparent;
    border: 1px solid blue;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-property: color, background-color;
}

input[type="button"]:hover {
    background-color: lightgreen;
    color: black;
    font-weight: bolder;
    border: 2px solid darkgreen;
    /*border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="button" id="process">

我通过将转换限制为仅需要的属性来修复它（请添加供应商前缀）：

transition-property: color, background-color;