jQuery - выберите onchange, чтобы вставить или выдвинуть div или форму

Question

Я пытаюсь улучшить форму, показывая только соответствующие поля в зависимости от первоначального выбора через поле выбора формы.

Это форма заказа для 3 продуктов, и все 3 продукта обладают уникальными свойствами.

Моя идея заключалась в том, чтобы спрятать все содержимое в div, а затем показать соответствующий div при выборе продукта. Я нашел несколько решений, которые показывают / скрывают div, но ни одного с какой-либо анимацией. Это не должен быть слайд, а просто что-то приятное!

Альтернативой вместо раскрытия div может быть загрузка отдельной формы, но это кажется ненужным.

Я не уверен, нужен ли мне плагин, так как я новичок в jquery.

Что я имею в html:

<style type="text/css">
.hide {
 display:none;
}

<select>
<option value="" >Please select product below</option>
<option value="pro1">Product 1</option>
<option value="pro2">Product 2</option>
</select>

<div id="pro1" class="hide" >Product 1</div>
<div id="pro2" class="hide" >Product 2</div>

Большое спасибо заранее

Answer 1

Вы можете использовать встроенный эффект slideUp () и slideDown.

Или любой другой встроенный эффект для jQuery. http://api.jquery.com/category/effects/

$(document).ready(function () {    
       $("#selectMenu").bind("change", function () {
        if ($(this).val() == "pro1") {
            $("#pro1").slideDown();
            $("#pro2").slideUp();
        }
        else if($(this).val() =="pro2") {
            $("#pro2").slideDown();
            $("#pro1").slideUp();
        }
    });
});

HTML:

<select id="selectMenu"> 
    <option value="" >Please select product below</option> 
    <option value="pro1">Product 1</option> 
    <option value="pro2">Product 2</option> 
</select> 

Answer 2

Вы можете использовать метод JQuery animate () для создания собственных стилей анимации, отличных от предопределенных анимаций, таких как скольжение, затухание и т. Д.