2013-07-12 48 views
0

我已經在網上搜索了所有內容,但似乎無法找到適合我需求的解決方案。我相當新的jQuery/JavaScript,但我認爲我想要做的很簡單。使用單選按鈕選擇fieldset時的平滑過渡

我有2個單選按鈕,用戶可以根據選擇來選擇附加輸入字段(包含在字段集中)。 這工作正常,但我想通過使它看起來平滑過渡來「漂亮起來」。

目前,這是我在做什麼

HTML:

<label for='student_type'>Freshman or Transfer Student</label><br /> 
<input type="radio" name="student_type" value="freshman" onclick="show_hs();">Freshman 
<input type="radio" name="student_type" value="transfer" onclick="show_college();">Transfer Student<br /> 

<fieldset id="hs_fields" style="display: none;"> 
<!--MY INPUTS--> 
</fieldset> 


<fieldset id="college_fields" style="display: none;"> 
<!--MY INPUTS--> 
</fieldset> 

的JavaScript:

<script> 
function show_hs() 
{ 
document.getElementById('hs_fields').style.display = 'block'; 
hide_college(); 
} 
function hide_hs() 
{ 
    document.getElementById('hs_fields').style.display = 'none'; 
} 

function show_college() 
{ 
    document.getElementById('college_fields').style.display = 'block'; 
    hide_hs(); 
} 
function hide_college() 
{ 
    document.getElementById('college_fields').style.display = 'none'; 
} 
</script> 

我會很高興來闡述什麼是不明確。 您的時間非常感謝,謝謝!

+0

「我會很高興來闡述什麼是不明確的。」你的問題不清楚。你想要發生什麼?爲什麼沒有標籤的時候會用jQuery標記? – j08691

+0

http://api.jquery.com/category/effects/ –

+0

@ j08691我標記了jquery,因爲我不確定我的解決方案是否需要jquery。我已閱讀.show()和.hide()函數,但不知道如何應用它。 – dmkumar

回答

0

也許你正在尋找像jQuery UI的效果? http://jqueryui.com/show/

例子:

$("#hs_fields").show("blind", {}, 500);

+0

是的,這就是我要找的。我怎麼會把這個在我的代碼?我可以只替換'document.getElementById('hs_f​​ields')。style.display ='block';' – dmkumar

+0

是的,但你需要包括jQuery和jQuery UI庫:http://learn.jquery.com/about- jQuery的/如何-jQuery的作品/ – CodingIntrigue