jquery - jQuery：如何向下滑动一个绝对 div 以及另一个向下滑动的 div？

Question

我有一个绝对定位在页面底部和上方的文本容器，有一个显示/隐藏按钮（它也是绝对定位的）。

我需要在滑动切换时将显示/隐藏按钮与文本容器一起上下滑动。当文本容器向下滑动时，按钮必须跟随它并在页面底部保持可见。当文本容器向上滑动时，按钮必须随之向上滑动。我似乎无法让它工作。

HTML：

<div class="wrapper">
  <div class="button">
     <span>Hide</span><span style="display:none;">Show</span></div>
  <div class="container">Lorem ipsum dolor sit amet....</div>
</div>

jQuery：

$(".button").click(function () {
  $(this).find("span").toggle();
  $(".container").slideToggle("slow");
});

这是小提琴：http: //jsfiddle.net/UDe8r/1/

Answer 1

在这里查看演示http://jsfiddle.net/yyene/fpPJz/3/

查询

$(document).ready(function(){
    $('.wrapper a').on('click',function(){
        if($(this).text() == 'Show')
            $(this).text('Hide');
        else
            $(this).text('Show');         
        $('.wrapper .content').slideToggle('slow');
    });
});

CSS

.wrapper {
    height: 400px;    
    position: relative;
}
.wrapper #button{
    cursor:pointer;
    position: relative;
    left:0;
    top:0;
    padding:0;
}
.wrapper #button a{
    padding:0 5px;
    text-align:right;
    background:green;
    cursor:pointer;
}
.container{    
    position: absolute;
    bottom:0;
}
.content{
    display:none;
    padding: 10px;
    background-color: #bbb;
}