在jQuery中将屏幕底部的项目动画化为屏幕顶部

Question

我正在使用jQuery，并正在制作一个“抽屉”，其中出现一个按钮（固定在屏幕底部），单击该按钮可将其“滑动”到屏幕顶部。 它不在下面的示例中，但是在其下面显示了内容，这种方法很有效。

我通过设置top和bottom属性使用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()