Question

我在网上搜索过，但我似乎无法找到适合我需求的解决方案。我对jquery / javascript很新，但我认为我想要做的很简单。

我有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>

我将非常乐意详细说明任何不明确的事情。非常感谢您的时间，谢谢！

Answer 1

也许您正在寻找类似jQuery UI的效果？ http://jqueryui.com/show/

示例：

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

使用单选按钮选择在fieldset上平滑过渡

1 个答案: