javascript - 使用 jQuery(或 Javascript)将状态更改动画化为 'disabled'

Question

问题

是否可以使用 jQuery(或其他一些 Javascript 库)动画输入禁用状态的更改

详细信息

常规输入和禁用输入具有不同的 CSS 样式。当在不同状态之间切换时，希望用户看到以前的状态淡入新状态。

是否可以仅通过更改输入的“禁用”状态来动画化此更改？也许通过做这样的事情:

// CSS
input{
   background-color: white;
}  
input:disabled{
   background-color: grey;
}

// Javascript
$.find('input').animate({'disabled': false});

或者我是否需要更改输入的禁用状态，然后单独为输入样式更改设置动画？

// Javascript
$.find('input').prop('disabled', false);
$.find('input').animate({'background-color': 'white'});

Answer 1

您可以使用 CSS 转换和 :disabled 伪类来实现此目的

$("#handler").change(function(){

  $("#myInput").prop("disabled", $(this).is(":checked"));
  
});

input[type="text"] {
	background: #fff;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}

input:disabled {
	background: #666666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="handler" />

<br />

<input type="text" id="myInput" />