jQuery - 向下滑动而不是向上滑动答案

【问题标题】：jQuery - slide down instead of slide upjQuery - 向下滑动而不是向上滑动
【发布时间】：2012-08-08 16:54:40
【问题描述】：

如何制作与jsFiddle相同，但不同的是绿色框应该向下滑动消失（并在您再次单击example中的click here链接时向上滑动出现）。

两个字符串

/*position:absolute;*/
/*bottom:0px;*/

jsFiddle 的 css 部分中的注释如果取消注释则效果不佳，因为它确实开始向下滑动，但浏览器滚动条消失 - 不好。

【问题讨论】：

谢谢，但问题是：请仔细检查您的示例，您看不到绿色块的底部。
抱歉没有注意到这一点，但现在用有效的演示链接更新了我的答案。

标签： jquery html css scrollbar slide

【解决方案1】：

编辑：

添加<div> 和id sliderWrapper 并给它100% width，如下所示。

<div width="100%" id="sliderWrapper">        
    <div id="slider" style="border:1px solid red;">
        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>F</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>E</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>D</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>C</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>B</h1>

        <h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1>

         <h1>6</h1><h1>7</h1><h1>8</h1><h1>9</h1><h1>10</h1>
    </div>
</div>

继续遵循 #slider 的 css 规则

  #slider {
      background : green;             
      width:100px;
      margin:20px auto 0 auto;
   }

以下行替换为$('#slider').slideToggle(500)

 if(hid) { $('#sliderWrapper').show("slide", { direction:"down" }, 500);} 
 else { $('#sliderWrapper').hide("slide", { direction:"down" }, 500); }

SEE DEMO

【讨论】：

谢谢，但问题是：请仔细检查您的示例，您看不到绿色块的底部。
@Haradzieniec：抱歉没有注意到这一点，但现在用有效的演示链接更新了我的答案。
谢谢，但现在它在滑动时会跳到左边。试图摆脱那种跳跃，仍然没有运气。
是的，在 Firefox 中注意到但在 chrome 中很好。奇怪的行为。
@Haradzieniec：最终通过对标记的一些调整得到了可行的解决方案。查看更新的答案。

【解决方案2】：

编辑了你的 jsFiddle！使用 jquery.slideToggle();和一些 Css 来获得正确的滑动方向！

jsFiddle

【讨论】：

你看到位置：绝对；底部：0；删除我在问题中提到的向下滚动？你看不到页面的结尾。此外，它会破坏对齐并且链接不会掉落。