javascript - 更改 jQuery 元素切换

Question

我有一个show / hide从顶部开始的 div 示例，但我需要从底部到顶部，我试图更改一些代码，但我不能，而且我没有找到任何示例。

<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>

滑动面板

<div id="panel">
    <!-- you can put content here -->
</div>

Answer 1

您还可以使用动画效果 ( http://api.jquery.com/animate/ ) 并更改 div 的高度。

$(document).ready(function(){
$(".btn-slide").click(function(){
if($('#panel1').height=='0')
$("#panel1").animate({height:"140px"},{duration:1000});
else
$("#panel1").animate({height:"0px"},{duration:1000});

    });
});

这将作为一个切换以及从底部动画

Answer 2

您可能想要使用jQuery UI 提供的幻灯片效果。它还允许您定义方向。

Answer 3

您可能想在 jquery 中使用 animate 选项，这里是代码

HTML

<button class="btn-slide">Some Text</button>
<div id="box">
<div id="panel">Sample Text here<br/> Sample Text here<br/>Sample Text here</div>
</div>

CSS

#box
{
height: 100px;
width:200px;
position:relative;
border: 1px solid #000;
}
#panel
{
position:absolute;
bottom:0px;
width:200px;
height:20px;
border: 1px solid red;
display:none;
}

查询

var panelH = $('#box').innerHeight();
$(".btn-slide").click(function(){
$("#panel").stop(1).show().height(0).animate({height: panelH},500);
});
});