Select with transition on change with onchange

Question

Select with transition on change with onchange

Navigation

#1 by (3 votes)
#2 by (0 votes)

5

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

Andhere'sthescript:

<metacharset="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 the person to change the payment cycle in select , so he changes the price only with a fade , because the way he is, he changes on time. I want to type a fade in this example : clicking to change a fade (transition) in prices, not just changes.

Only in my table will not be a single select , it will have several each plan with one, as shown in the above image.

javascript html html5 css

asked by anonymous 25.03.2014 / 22:16

2 answers

0

The site mentioned as an 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 of jQuery.

1:

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

disappears with the old value.

2:

'fast'

The first parameter tells the duration time 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 a handler of a function to be executed when completing the fadeOut of the old price.

Then the fadeIn of the element itself is executed, showing it again, but changing its contents ( .html() ) - the new price is placed:

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

25.03.2014 / 22:59

How to display correct name in a bitwise enum? How not to display past date records

score 3 · Accepted Answer

What you need is an animation. In the example I use jQuery animate and I can put another variant with MooTools in a while. I leave comments in 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 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've changed to have a div around each select to make it easier to find the element that shows the price. It can be done in other ways but it's good not to over-customize.
I removed the ID from <p id="selecionado"> because ID's have to be unique, I've changed it to a class: <p class="selecionado">
I removed the script inside HTML, it is bad practice and instead I used $('select.selectPreco').on('change', function () {