jquery - 将元素与页面底部或 html 中的 div 对齐

Question

我想在应用程序中使用滑动面板。我正在使用以下代码。

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
});
});

我分享的代码只是将 div 从其实际位置扩展到向下方向。但我希望 div 从其实际位置向上扩展。我希望你明白我的意思。请帮我

Answer 1

尝试这个

  $('#panel').show("slide", { direction: "down" }, 1000);

演示

然后让它像动作一样切换检查是否可见

if($('#panel').is(':visible')){
  $('#panel').hide("slide", { direction: "down" }, 1000);
}else{
  $('#panel').show("slide", { direction: "down" }, 1000);
}

Answer 2

其他的都是很好的答案，但我决定添加一个使用 css3 过渡的版本，因为它们更流畅，我认为我们应该使用它们来推动网络向前发展：

http://jsfiddle.net/jonigiuro/wQwkz/1/

$(document).ready(function(){
  $("#flip").click(function(){
    $('.elem').addClass('shown');
    });
});

Answer 3

尝试这个 ：

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
});
});