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

点击此处DEMO http://jsfiddle.net/yeyene/fpPJz/3/

JQUERY

$(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;
}