Question

我正在使用jQuery并且正在创建一个“抽屉”，其中出现一个按钮（固定在屏幕的底部），当点击“滑动”到屏幕顶部时。它不在我下面的例子中，但它显示了它下面的内容，它有效（有点）。

我使用jquery通过设置顶部和底部属性来设置它的动画。

if (!mapShowing) {
        $("#mapcontainer").animate({bottom: "auto", top: "0px"},1000,'swing');
        $("#map").fadeIn();
        $('#showmap').text('↓ Click to hide map ↓');
    } else {
        $("#mapcontainer").animate({bottom: "30px", top: "auto"},1000,'swing');
        $('#showmap').text('↑ Click to show map ↑');
        $("#map").fadeOut();
    }

然而，它上升了，但它永远不会下降。我不确定如何解决这个问题...我尝试使用空白（顶部：''等），但这不起作用。我不确定如何从底部到顶部“滑动”按钮......也许会使底部值为正值？我找不到很多关于如何清除左上角左右值的文档，我做的任何事情似乎都没有用。

https://jsfiddle.net/01h95r7s/2/

Answer 1

这是一个超级简化的设置......只有很少的jquery和更好的CSS使用

https://jsfiddle.net/01h95r7s/4/

HTML

<a href="#showmap" id="showmap" class="button"></a>
<div id="map"></div>

Jquery的

  $(document).on('click', '#showmap', function(){
      $('#map, #showmap').toggleClass('open');
  });

CSS

#map{
    position: fixed;
    display: block;
    left:0; right:0;
    top:100%; bottom:0;
    background:#555;
    -webkit-transition: height 500ms, top 500ms;
            transition: height 500ms, top 500ms;
}

#map.open{
    top:40px;    
}

#showmap {
    position:fixed;
    bottom:0; left:0;
    z-index:5;
    -webkit-transition:  all 500ms;
            transition: all 500ms;
}

#showmap.open {
    bottom:100%;
    margin-bottom:-37px;
}

#showmap:after {
    content:'▲ Click to Show Map ▲';
}
#showmap.open:after {
    content:'▼ Click to Hide Map ▼';
}

Answer 2

这应该有效

if (!mapShowing) {

        $("#mapcontainer").animate({ bottom: ($(window).height()-$("#mapcontainer").height())+"px"},1000);
        $("#map").fadeIn();
        $('#showmap').text('↓ Click to hide map ↓');
    } else {
        $("#mapcontainer").animate({bottom: "30px"},1000);
        $('#showmap').text('↑ Click to show map ↑');
        $("#map").fadeOut();
    }
}

演示

https://jsfiddle.net/3yf0q86b/

最好添加动画检测并停止动画

if($("#mapcontainer").is(':animated'))
        $("#mapcontainer").stop()

将屏幕底部的项目设置为jquery中的屏幕顶部

2 个答案: