Animate item on bottom of screen to top of screen in jquery

Question

I am using jQuery and am making a "drawer" where a button appears (fixed to bottom of screen), that when clicked "slides" to the top of the screen. It's not in my example below but it shows content below it, which works (kinda).

I use jquery to animate it going up by setting the top and bottom attributes.

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

However, it goes up, but it never comes down. I am unsure how to fix this... I tried using blanks (top: '', etc), but that didn't work. I'm not sure how to "slide" up a button from the bottom to top... perhaps make the bottom values positive instead? I can't find a lot of documentation on how to clear top bottom left right values, nothing I do seems to work.

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

Answer 1

Here is a super simplified setup...with very little jquery and better CSS use

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

this should works

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

demo here

https://jsfiddle.net/3yf0q86b/

and better to add animating detection and stop the animation

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