Javascript jQuery显示/隐藏-使其他元素具有更平滑的过渡

当我隐藏/显示“myContent”div下面的标签/表单时，是否有办法使其平滑过渡

目前，当myContent div被切换时，它下面的其他元素“跳转”到位——如果我能找到一种方法将它们滑到正确的位置，那就太好了。你觉得怎么样

JavaScript 函数切换div（divId）{ jQuery（“#”+divId）.切换（“幻灯片”{ 方向：“向上” }); } 函数显示（divID）{ jQuery（“#”+divID）.show（“幻灯片”{ 方向：“向上” }, 500); } 函数隐藏（divID）{ jQuery（“#”+divID）.hide（“幻灯片”{ 方向：“向上” }, 500); } HTML

显示
隐藏
按下切换按钮时，此div中的内容将隐藏并显示（切换）。
名称

您的密码为空

您可以使用

slideDown（'slow'），而不是
show（）

对于
hide
可以使用
slideUp（'slow'）也可以设置方向

否则您可以使用
您的密码为空

您可以使用
slideDown（'slow'），而不是
show（）

对于
hide
可以使用
slideUp（'slow'）也可以设置方向

否则您可以使用

优化了javascript，使所有代码都基于jQuery

HTML代码

<a href="#" style="background-color: #ccc; padding: 5px 10px;" class="togglebtn">Toggle Button</a>

<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
    <div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
    </div>
</div>
<div>
    <label for="cool-field">Name</label>
    <input type="text" name="cool-field" id="cool-field" />
</div>


优化了javascript，使所有代码都基于jQuery

HTML代码

<a href="#" style="background-color: #ccc; padding: 5px 10px;" class="togglebtn">Toggle Button</a>

<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
    <div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
    </div>
</div>
<div>
    <label for="cool-field">Name</label>
    <input type="text" name="cool-field" id="cool-field" />
</div>

您将其更改为$，但我读到我应该使用jQuery而不是$来避免冲突？如果您确实有其他javasript库使用$作为函数或变量名，那么是的。此外，您还必须使用jQuery.noConflict（）函数使jQuery放弃对$variable的控制。您将其更改为$，但我读到我应该使用jQuery而不是$来避免冲突？如果您确实有其他javasript库使用$作为函数或变量名，那么可以。此外，还必须使用jQuery.noConflict（）函数使jQuery放弃对$variable的控制。
<a href="#" style="background-color: #ccc; padding: 5px 10px;" class="togglebtn">Toggle Button</a>

<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
    <div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
    </div>
</div>
<div>
    <label for="cool-field">Name</label>
    <input type="text" name="cool-field" id="cool-field" />
</div>

$(function(){
    $('a.togglebtn').click(function(){
        $('#myContent').stop().slideToggle(500);
        return false;
    });
    $('#showthing').click(function(){
        $('#myContent').slideDown(500);
    });
    $('#hidething').click(function(){
        $('#myContent').stop().slideUp(500);
    });    
});