javascript - jQuery滑块：向下滑动整个页面

Question

源代码在这里：JSfiddle

$(document).ready(function () {
$("#slide-link").click(function ()
   {
     $("#slider").hide("slide", { direction:"down" }, 1000);
   });
});

问题是： 如何使“单击此处”链接与该绿色块一起掉落并停留在最底部（绿色块消失，“单击此处”链接停留在底部）？一旦第二次按下“点击这里”（在最底部），一切都会上升（第二次点击链接消除了第一次点击）。结果，两次点击后页面没有任何变化。

Answer 1

首先; 当高度值减小时，您的问题就开始了，您应该更改您的 css 结构。其次，您需要使用外部类来了解该对象是否处于活动状态。

这是 jsFiddle 示例。

jQuery：

$("#slide-link").click(function (){
   if (!$(this).hasClass('active')) {//if clicked object has not got class active
      $("#slider").stop().animate({'bottom':'-401px'}, 1000);
      $(this).addClass('active');    
   }else{
      $("#slider").stop().animate({'bottom':'0px'}, 1000);//added stop to prevent
      $(this).removeClass('active');               //create an animate conflict
   }
});​

CSS：

#global-container {
 background-image    : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
 height     : 400px;
 overflow:hidden;
}

编辑： 如果您也想向下滑动单击文本，请检查此 jsFiddle 示例。

Answer 2

试试下面的代码。

jQuery：

$("#slide-link").click(function () {

   if($("#slider").is(":visible")){
       $("#slider").hide("slide", { direction:"down" }, 1000);
       $("#slide-link").animate({top: '380px'}, 1050)
       
   } else if($("#slider").is(":hidden")) {   
       $("#slider").show("slide", { direction:"down" }, 1000);
       $("#slide-link").animate({top: '0px'}, 950)        
   }

});

CSS中的修改：

#global-container
{
    background-image    : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
    height: 400px; /* Added Height */
    overflow: hidden; /* Added Overflow Property */
}

#slider
{
    margin     : 20px 0 0 0; /* Added Top Margin */
    width      : 100px;
    height     : 400px;
    background : green;
    position   : relative;
}

/* Added New Style */
#slide-link 
{
    position: absolute; 
    top:0; 
    left:0; 
    z-index:9999; 
    height: 20px;
}

看演示