@k3SerJ

Выпадающий блок, как осуществить?

Здравствуйте, прошу у вас помощи, так как я совсем нулевой, а осуществить вроде как хотелось бы.
Есть форма с некоторым выбором услуг, вот код этого "select"
<select name="service" class="input first" onChange="Selected(this)">
						<option value="0"></option>
                                                <option value="1">УЗИ</option>
						<option value="2">Ударно-волновая терапия</option>
						<option value="3">Лазерная эпиляция</option>
                                                <option value="4">Лимфастим</option>
                                                <option value="5">Консультация невролога</option>
                                                <option value="6">Консультация хирурга</option>
                                                <option value="7">Консультация кардиолога</option>
                                                <option value="8">Холтеровское мониторирование</option>
                                                <option value="9">Электрокардиограмма</option>            
					</select>

И при выборе пункта с лазерной эпиляцией или узи появляется ещё один "select", соответствующий одному из пунктов, вот код JS и одного из "select"
function Selected(a) {
        var label = a.value;
        if (label==3) {
            document.getElementById("docs_lazer").style.display='block';
            document.getElementById("docs_uzi").style.display='none';             
        } else if (label==1) {
            document.getElementById("docs_lazer").style.display='none';
            document.getElementById("docs_uzi").style.display='block';
        }
        else {
            document.getElementById("docs_lazer").style.display='none';
            document.getElementById("docs_uzi").style.display='none';
        }        
}

<div class="field" name="docs_lazer" id="docs_lazer" style='display:none;'>
				<div class="label">
					Выберите врача

				</div>
                                <div class="finput">
					<select name="docl" class="input first">
						<option value="0"></option>
                                                <option value="1">Врач 1</option>
						<option value="2">Врач 2</option>           
					</select>
				</div>
                        </div>

Вот теперь к сути вопроса. Всё это работает, не считая одного но, блок с выбором врачей появляется в форме резко, что конечно же сильно не приятно, а хотелось бы, чтоб этот блок плавно появлялся, но не через fadeIn, а как бы выезжал сверху вниз. Помогите пожалуйста, кто может.
  • Вопрос задан
  • 62 просмотра
Решения вопроса 2
Animate.css - FadeIn Up, FadeIn Down и тд.
Ответ написан
Комментировать
@k3SerJ Автор вопроса
Разобрался. Может кому интересно, реализовал через функции SlideUp и SlideDown. Пример кода:
function Selected(a) {
        var label = a.value;
        if (label==3) {
            $(docs_uzi).slideUp("slow");
            $(docs_lazer).slideDown("slow");            
        } else if (label==1) {
            $(docs_lazer).slideUp("slow");
            $(docs_uzi).slideDown("slow");
        }
        else {
            $(docs_lazer).slideUp("slow");
            $(docs_uzi).slideUp("slow"); 
        }        
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы