Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2017, 13:58
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

Добавить плавности смене по select.
Добрый день,
есть поле список с ценами, при смене значения, меняется отображаемая цена. Как сделать, чтобы эта смена происходила плавно?

<form method="post" action="" id="formMain"  name="formMain">
	<div id="cena">25 150</div>
	<select name="razmer_vorota" id="razmer_vorota"> 
		<option  data-price="25 150" value="2500 x 2115">2500 x 2115</option>
   		<option  data-price="30 200" value="3350 x 2390">3350 x 2390</option>
    </select>
</form>


var formMain = document.forms.formMain;
		formMain.oninput = formMain.onchange = function() {
		cena.innerHTML = this.razmer_vorota[this.razmer_vorota.selectedIndex].getAttribute('data-price');		
};
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2017, 14:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от webmanss
Как сделать, чтобы эта смена происходила плавно?
Как ты понимаешь ту "плавность"?
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2017, 15:46
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<form method="post" action="" id="formMain"  name="formMain">
	<div id="cena">25 150</div>
	<select name="razmer_vorota" id="razmer_vorota"> 
		<option  data-price="25 150" value="2500 x 2115">2500 x 2115</option>
   		<option  data-price="30 200" value="3350 x 2390">3350 x 2390</option>
    </select>
</form>
<script>
razmer_vorota.onchange = function() {
          var i = 1;
          var timer = setInterval(function() {
                 i = i - 0.1;
                 cena.style.opacity= i;
                 if (i < 0.1) { 
                    clearInterval(timer);
                    cena.innerHTML = this.razmer_vorota[this.razmer_vorota.selectedIndex].getAttribute('data-price');
                    timer = setInterval(function() {
                       i = i + 0.1;
                       cena.style.opacity= i;
                       if (i > 1)  clearInterval(timer);
                   },100);
                }
           },100);
		
};
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2017, 18:00
Аспирант
Отправить личное сообщение для webmanss Посмотреть профиль Найти все сообщения от webmanss
 
Регистрация: 17.02.2013
Сообщений: 34

Dilettante_Pro,
ТО, что нужно СПАСИБО!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вытащить переменную из select и добавить в формулу zoomx25 Общие вопросы Javascript 6 04.04.2017 02:07
Добавить option в select при помощи js flyte Javascript под браузер 15 23.01.2017 11:23
Как добавить атрибут в select option mclaren_bbc Элементы интерфейса 9 03.03.2016 23:33
добавить addEventListener, который бы срабатывал при измении содержания select sovsem-nub Элементы интерфейса 3 28.11.2015 20:05
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39