使用 jQuery（或 Javascript）为 'disabled' 状态的变化设置动画

Question

问题

是否可以使用jQuery（或其他Javascript库）动画输入禁用状态的变化

详情

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

是否可以仅通过更改输入的 'disabled' 状态来激活此更改？也许通过做这样的事情：

// 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 伪 class

实现此目的

$("#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" />

使用 jQuery（或 Javascript）为 'disabled' 状态的变化设置动画

Animate the change to 'disabled' state using in jQuery (or Javascript)

javascript

jquery

jquery-animate