向上方向的jquery SlideToggle效果？答案

【问题标题】：jquery SlideToggle effect in upward direction?向上方向的jquery SlideToggle效果？
【发布时间】：2014-12-23 05:50:54
【问题描述】：

我需要在向上方向制作一个 jquery 滑动切换效果。现在滑动切换只在向下方向工作。当我使用向上滑动的方法时，我无法使用相同的按钮向上滑动和向下滑动 div。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11/jquery.min.js">              </script>
<script> 
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideToggle("slow");



 });
});
</script>

<style> 
#panel,#flip
{

padding:5px;
text-align:center;
height:92px;
width:261px;
opacity:0.8;
background-color:#b3171d;

}

 #panel
{
padding:50px;
background:url(maharani%20html/images/prince.jpg) no-repeat;
width:262px;
height:248px;

}
</style>
</head>
<body>

<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>

 </body>
</html>

我是jquery的初学者。请帮助我:)

【问题讨论】：

可以在jquery中使用动画
@ShuhaibV ，给我代码，我试过了，但没用。

标签： javascript jquery html slidetoggle

【解决方案1】：

试试下面的代码 JSFIDDLE

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">                 </script>
    <script>
    $(document).ready(function(){
     $("#flip").click(function(){
      $("#panel").slideToggle({
      direction: "up"
    }, 400);

 });
});
</script>
<style> 
#panel,#flip
{

position:absolute;
  bottom:0;
  width: 50%;
  padding-bottom:2%;
  z-index: 100;
opacity:0.8;
background-color:#b3171d;
}
 #panel
{
    display: none;
padding:50px;
background:url(maharani%20html/images/prince.jpg) no-repeat;
width:262px;
height:248px;

}
</style>
</head>
<body>
    <div>
    <div id="panel">Hello world!</div>
    </div>
    <div id="flip">Click to slide up panel</div>

 </body>
</html>

【讨论】：

@MasreMohsin，感谢您的帖子。但是我想让按钮保持不变（静态），并且需要从按钮上下滑动段落（切换）。谢谢
我已经更新了代码，只需通过提供的 JSFiddle 即可。
老兄，这是我已有的效果。看，这种滑动效果是向下的。单击面板 div 时，向下滑动。我希望它向上，谢谢你的时间。请帮助我
现在查看，向上滑动切换！
JSFiddle 也显示了我们已经拥有的输出。我们需要使方向相反。