Como adicionar um efeito de transição (fade) em um select
com onchange
, que quando o objeto <div>
for alterado o mesmo ocorra uma transição?
Abaixo segue um print da tabela que foi feita:
E este é o 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.
-->
Quero que quando a pessoa alterar o ciclo de pagamento no select
, ele mude o preço só que com um fade, porque do jeito que está, ele muda na hora. Eu quero tipo um fade neste exemplo: ao clicar para alterar ocorre um fade ( transição ) nos preços, e não apenas muda.
Só que na minha tabela não vai ser um único select
, ele vai ter vários cada plano com um, como mostrado na imagem acima.