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代码段中存在错误。我删除了最后一行，现在它已淡出。

 $('#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;

输入类型按钮上的jQuery fadeOut（）函数

1 个答案: