5

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:

Print Tabela

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.

4
  • Alexandre, pode usar-se Mootools, jQUery ou outra biblioteca?
    – Sergio
    Commented 25/03/2014 às 21:25
  • Sim, o importante é que funcione. :D Commented 25/03/2014 às 21:28
  • Oi, Alexandre, bem-vindo ao SOPT :) Editei sua pergunta para melhorar a formatação, confira o guia do markdown. Por favor, coloque sempre o código com problemas aqui mesmo.
    – brasofilo
    Commented 26/03/2014 às 0:15
  • Obrigado @brasofilo Commented 26/03/2014 às 1:59

2 Respostas 2

3

O que você precisa é de uma animação. No exmplo em baixo uso jQuery animate e posso colocar daqui a pouco outra variante com MooTools. Deixo comentários no código.

Exemplo:

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

Teste neste exemplo mudar o select.

Para aplicar isto ao seu código precisa de fazer algumas alterações:

  • se quer usar vários selects eu mudei para ter uma div à volta de cada select para facilitar encontrar o elemento que mostra o preço. Pode fazer-se de outras maneiras mas é bom não customizar demais.
  • retirei o ID do <p id="selecionado"> pois os ID's têm de ser únicos, mudei para uma classe: <p class="selecionado">
  • retirei o script dentro do HTML, é má prática e usei em vez disso o $('select.selectPreco').on('change', function () {
15
  • Mais o problema é que eu não entendo muito de javascript, meu forte é CSS. Você poderia implementar essa função no script que deixei para download a cima? #porfavor Commented 25/03/2014 às 21:43
  • @AlexandreLopes, é isto que quer: jsfiddle.net/7BN3P ?
    – Sergio
    Commented 25/03/2014 às 21:49
  • Muito obrigado @Sergio, você me ajudou também! Commented 25/03/2014 às 21:49
  • Minha internet não ajuda, não consigo acessar o site, está lenta... Commented 25/03/2014 às 21:52
  • 1
    Sim sim, muitoooooooooo obrigadoooooooooooooooo!! Commented 25/03/2014 às 21:53
0

O site mencionado como exemplo usar o seguinte script (adaptado):

.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();
})

Então se você quiser usar o mesmo efeito você pode usar o fadeIn + fadeOut do jQuery.

1:

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

desaparece com o valor antigo.

2:

'fast'

O primeiro parâmetro diz o tempo de duração do efeito.

3:

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

O segundo parâmetro é um handler de uma função para ser executado ao completar o fadeOut do preço antigo.

É executado então o fadeIn do próprio elemento, mostrando-o de novo, mas alterando o seu conteúdo (.html()) - é colocado o novo preço:

 $(this).html('R$ ' + novoPreco).fadeIn()
3
  • Obrigado pela colaboração, também vou testar seu exemplo. Commented 25/03/2014 às 22:01
  • você poderia hospedar seu exemplo para que eu possa ver, como eu disse eu não entendo muito de javascript. Commented 25/03/2014 às 22:04
  • 1
    André eu já tentei usar o fadeIn e Out do jQuery, porém eles não tem uma boa transição para textos, e eu quero é para textos... Exatamente como o Sergio fez. Commented 26/03/2014 às 2:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .