jQuery - Анимация для разрешенных/отключенных текстовых полей

Question

У меня есть простая форма с некоторыми отключенными текстовыми полями. Когда пользователь нажимает на этот флажок, текстовые поля активируются.

Как я могу добавить анимацию на текстовые поля, так что, когда флажок установлен, коробки выгорает или слайд в ..

HTML:

<ul> 
<li> 
    <input id="addPreviousAddress" name="addPreviousAddress" type="checkbox" /> 
    <label class="blueText boldText" for="addPreviousAddress">Add Previous Address</label> 
</li> 
<li> 
    <label>House Number</label> 
    <input class="requiredField" id="prevHouseNumber" size="10" Maxlength="10" disabled="" type="text" />&nbsp 
    <label>Flat Number</label> 
    <input class="one-sixth requiredField" id="prevFlat" size="10" Maxlength="16" disabled="" type="text" /> 
</li> 
<li> 
    <label>House Name</label> 
    <input id="prevHouseName" size="24" Maxlength="26" disabled="" type="text" /> 
</li> 
<li> 
    <label>Street</label> 
    <input class="three-fifths requiredField" id="prevStreet" size="40" Maxlength="40" disabled="" type="text" /> 
</li> 
<li> 
    <label>Town</label> 
    <input class="three-fifths" id="prevTown" size="40" Maxlength="20" disabled="" type="text" /> 
</li> 
<li> 
    <label>County</label> 
    <input class="three-fifths" id="prevCounty" size="25" Maxlength="20" disabled="" type="text" /> 
</li> 
<li> 
    <label>Postcode</label> 
    <input class="requiredField" id="prevPostcode" size="10" Maxlength="8" disabled="" type="text" /> 
</li> 
<li> 
    <label>Time at address</label> 
    <input type="text" id="prevTimeYY" size="2" Maxlength="2" disabled="" type="text" />Years &nbsp&nbsp&nbsp 
    <input type="text" id="prevTimeMM" size="2" Maxlength="2" disabled="" type="text" />Months</li> 

JS:

$('#addPreviousAddress').change(function() { 

$("#prevHouseNumber").prop("disabled", !$(this).is(':checked')); 
$("#prevFlat").prop("disabled", !$(this).is(':checked')); 
$("#prevHouseName").prop("disabled", !$(this).is(':checked')); 
$("#prevStreet").prop("disabled", !$(this).is(':checked')); 
$("#prevDistrict").prop("disabled", !$(this).is(':checked')); 
$("#prevTown").prop("disabled", !$(this).is(':checked')); 
$("#prevCounty").prop("disabled", !$(this).is(':checked')); 
$("#prevPostcode").prop("disabled", !$(this).is(':checked')); 
$("#prevTimeYY").prop("disabled", !$(this).is(':checked')); 
$("#prevTimeMM").prop("disabled", !$(this).is(':checked')); 

});

Вот моя скрипка: http://jsfiddle.net/oampz/mtsZ9/1/

Любая помощь будет оценена.

Answer 1

Попробуйте этот код:

DEMO

$('#addPreviousAddress').change(function() { 
    $("input").not(this).hide(); 
    $("input").not(this).prop("disabled",!$(this).is(':checked')).fadeIn(); 
    }); 

Answer 2

Вы не можете, поскольку они уже видны. Вы не можете исчезнуть в видимом объекте. Вы можете сделать это, вместо того, чтобы показывать эти отключенные текстовые поля, вы можете скрыть их. Затем с CheckBox мыши, вы можете приглушить их, как:

$("#prevHouseNumber").fadeIn(); 

Answer 3

Я не уверен, если это хотим, чтобы вы хотели, но вы можете попробовать ввести следующий код:

$("#prevHouseName").toggle(600,function(){ 
    $(this).prop("disabled", !$(this).is(':checked')) 
});