Select with transition in change with onchange

Question

How to add a transition effect (fade) in a select with onchange, that when the object <div> change the same occurs a transition?
Below follows a print table that was made:

And this is the script:

<meta charset="utf-8" />
<!-- Isto é a seleção de planos, basta adicionar em qualquer lugar para que o usuario selecione o plano 
Atenção! Em value coloque o valor do plano -->

<p> 
<select name="select" onchange="document.getElementById('selecionado').innerHTML = 'R$ ' + this.value;">  
     <option value="nenhum|" selected="selected">Selecione:</option>  
    <option value="10,00">Mensal</option>
    <option value="11,00">Trimestral</option>  
    <option value="12,00">Semestral</option>
    <option value="13,00">Anual</option>  
  </select>  
</p>  

<p id="selecionado">
    O valor padrão
</p>   <!-- Acrescente este código aonde você quer que o texto seja trocado -->

<!-- Como criar uma outra seleção:

Basta trocar o nome em:
<select name="select" onchange="document.getElementById('selecionado').innerHTML = 'R$ ' + this.value;">  
Este código você troca esta parte que estará em maiusculo:
<select name="select" onchange="document.getElementById('TROCAR ESTA PALAVRA PARA UMA OUTRA QUALQUER').innerHTML = 'R$ ' + this.value;"> 
E aí coloque o código de seleção:
<p id="selecionado"></p> 
Troque a palavra que "selecionado" para o mesmo que você colocou no primeiro código.
-->

I want when the person changes the payment cycle on select, he changes the price only with a fade, because the way it is, it changes on time. I want like a fade in this example: when clicking to change occurs a fade ( transition ) in prices, and not just changes.

Only on my chart it won’t be a single select, it will have several each plane with one, as shown in the image above.

Answer 1

What you need is an animation. In the example below use jQuery Animate and I can soon put another variant with Mootools. I leave comments on the code.

Example:

mostrador.animate({
    opacity: 0           // mudar a opacidade para 0 = invisivel
}, 200, function () {    // chamar a função que corre quando o 1o animate acabar
    mostrador.html(val); // enquanto está invisivel mudar o valor
    mostrador.animate({
        opacity: 1      // mudar para visivel
    }, 200)             // velocidade = 200 milisegundos
})

jsFiddle

Test in this example to change the select.

To apply this to your code you need to make some changes:

• If you want to use multiple selects I switched to have a div around each select to make it easy to find the element that shows the price. It can be done in other ways but it’s good not to customize too much.
• I removed the ID of the <p id="selecionado"> ID’s have to be unique, I switched to a class: <p class="selecionado">
• I removed the script inside the HTML, it is bad practice and used instead the $('select.selectPreco').on('change', function () {

Answer 2

The site mentioned as example use the following script (adapted):

.find('.price-value').fadeOut('fast', function(){
    $(this).html('R$ ' + price_discount_split[0] +',<sup class="sup">' + 
    price_discount_split[1] + '</sup><span class="span">/mês</span>').fadeIn();
})

So if you want to use the same effect you can use the fadein + fadeOut jQuery.

1:

.find('.price-value').fadeOut(

disappears with the old value.

2:

'fast'

The first parameter tells the duration of the effect.

3:

function(){
    $(this).html('R$ ' + price_discount_split[0] +',<sup class="sup">' + 
    price_discount_split[1] + '</sup><span class="span">/mês</span>').fadeIn();
}

The second parameter is an Handler of a function to be executed when completing the fadeOut of the old price.

It then runs the fadein of the element itself, showing it again, but changing its content (.html()) - the new price is placed:

 $(this).html('R$ ' + novoPreco).fadeIn()