1

当我隐藏/显示它时，是否有办法让“myContent”div 下方的标签/表单具有更平滑的过渡？

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

JavaScript

功能切换Div（divId）{
    jQuery("#" + divId).toggle("slide", {
        方向：“向上”
    });
}

功能ShowThing（divID）{
    jQuery("#" + divID).show("slide", {
        方向：“向上”
    }, 500);
}

功能隐藏（divID）{
    jQuery("#" + divID).hide("slide", {
        方向：“向上”
    }, 500);
}

HTML

<a href="javascript:toggleDiv('myContent');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>

<button onclick="ShowThing('myContent');">Show</button>
<button onclick="HideThing('myContent');">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>
4

2 回答 2

1

单击此处获取 jsFiddle

优化了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代码：

$(function(){
    $('a.togglebtn').click(function(){
        $('#myContent').stop().slideToggle(500);
        return false;
    });
    $('#showthing').click(function(){
        $('#myContent').slideDown(500);
    });
    $('#hidething').click(function(){
        $('#myContent').stop().slideUp(500);
    });    
});
于 2013-04-29T04:50:26.883 回答
0

你的Jsfiddle是空白的。

而不是show()你可以使用slideDown('slow'); 你hide可以使用slideUp('slow');你也可以设置方向。

否则你可以使用JQuery Animate

于 2013-04-29T04:50:05.143 回答