Question

源代码在这里：JSfiddle

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

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

Answer 1

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

Here is jsFiddle example.

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

修改如果您想要向下滑动单击文本， inspect this jsFiddle example.

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

JQuery滑块：向下滑动整个页面

2 个答案:

SEE DEMO