jquery - 使用 jquery 淡入或淡出 css 样式

Question

我需要知道是否可以使用 jquery fadeIn 或 fadeOut 某些 CSS 样式

$("#id").keyup(function() {
    if ($(this).val().length > 0) {
        $("input[type=text]").css('border','1px solid gray');
    }else{
        $("input[type=text]").css('border','1px solid red'); 
    }
});

我需要做类似的事情

$("input[type=text]").css('border','1px solid red').fadeOut("slow");

但这不起作用......

有什么建议吗？

Answer 1

我认为这个简单的效果可以用 CSS 完成，只需要一个必要的 jQuery。检查这个最小的例子:

CSS:

input{
    border: 1px solid gray;
    transition: 0.5s;
}

.error{
    box-shadow: 0 0 3px red;
}

jQuery:

$("#id").keyup(function() {
    if ($(this).val().length > 0) {
        $(this).removeClass('error');
    }else{
        $(this).addClass('error');
    }
});

fiddle : https://jsfiddle.net/0puu7c2j/