使用 Javascript 淡入/淡出

我有一些JavaScript代码，在单击两个按钮之一时应用了display:none和display:inline的css样式，但我似乎无法让它们很好地淡入淡出，即时显示无/内联有点刺眼。

//<![CDATA[
var submitcount42059 = 0;
function checkWholeForm42059(theForm) {
    var why = "";
    if (theForm.FirstName) 
        why += isEmpty(theForm.FirstName.value, "First Name");
    if (theForm.LastName) 
        why += isEmpty(theForm.LastName.value, "Last Name"); 
    if (theForm.EmailAddress) 
        why += checkEmail(theForm.EmailAddress.value); 
    if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { 
        if (theForm.CardName) 
            why += isEmpty(theForm.CardName.value, "Name on Card"); 
        if (theForm.CardNumber) 
            why += isNumeric(theForm.CardNumber.value, "Card Number"); 
        if (theForm.Amount) 
            why += isCurrency(theForm.Amount.value, "Amount"); 
    } 
    if (theForm.PaymentMethodType) 
        why += checkSelected(theForm.PaymentMethodType, "Payment Method");
    
    if(why != "") 
    {
        alert(why);
        return false;
    }
    if(submitcount42059 == 0)
    {
        submitcount42059++;
        theForm.submit();
        return false;
    }
    else
    {
        alert("Form submission is in progress.");
        return false;
    }
}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
function ShowCCFields(val) {							
    if (!document.getElementById('paymentdiv'))
	    return;  		
	if (val != 1)
	    document.getElementById('paymentdiv').style.display = 'none';				
	else
		document.getElementById('paymentdiv').style.display = 'inline';
}				
//]]>

<div id="paymentdiv">
    <div class="col-md-4">
        <div class="form-group">
            <label>Card Number<sup>*</sup></label><br />
            <input class="form-control dark" id="CardNumber" type="text" pattern="[0-9]*" name="CardNumber" />
        </div>
    </div>
</div>
            
<div class="col-xs-12 col-md-6"> 
    <label class="PayCC"><input class="PaymentMethodType" onclick="ShowCCFields(this.value);" type="radio"  value="1" name="PaymentMethodType" />
        <span>Credit Card</span>
    </label>
</div>
<div class="col-xs-12 col-md-6"> 
    <!--<label class="PayCC"><input class="PaymentMethodType" onclick="ShowCCFields(this.value);" type="radio" value="3" name="PaymentMethodType" /><span>COD (Cash on Delivery)</span></label><br>-->
                            
    <label class="PayCC"><input class="btn btn-primary" onclick="ShowCCFields(this.value);" type="radio" value="5" name="PaymentMethodType" />
        <span>PayPal</span>
    </label>
</div>