Используйте Javascript для того, чтобы затухать в/исчезать

Question

У меня есть код JavaScript, который применяет стиль css display:none и display:inline при нажатии одной из двух кнопок, но я не могу заставить их исчезать и выходить красиво, мгновенный дисплей none/inline немного раздражает глаза.

//<![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) { \t \t \t \t \t \t \t 
 
    if (!document.getElementById('paymentdiv')) 
 
\t  return; \t \t 
 
\t if (val != 1) 
 
\t  document.getElementById('paymentdiv').style.display = 'none'; \t \t \t \t 
 
\t else 
 
\t \t document.getElementById('paymentdiv').style.display = 'inline'; 
 
} \t \t \t \t 
 
//]]>

<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> 
 
    

Answer 1

Я не знаю, если вы открыты для глядя на другие библиотеки, но d3.transition, кажется, что вы ищете.

A nice descriptive quote of what it would involve

метод selection.transition D3 позволяет легко анимировать переходы при изменении DOM. Например, чтобы сразу изменить цвет текста на красный, вы можете выбрать элемент тела и задать стиль цвета:

d3.select («body»). Style («color», «red»);

Чтобы вместо анимации изменения с течением времени, получить переход:

d3.select ("тело") переход() стиль ("цвет", "красный");..

А вот хороший интерактивный учебник I learnt about d3 transitions with