javascript - 如何降低 map 元素的高度

Question

我正在编写以下代码。为什么我无法降低 #map 的高度？

如您所见，.btn-enlarge 正在扩大图像的高度，但 .btn-shrink 并未减小高度

$(function() {
  var unit = 10;
  
  $(".btn-enlarge").on("click", function(){
    unit = unit+ unit; 
    $("#map").animate({ 
                'height':  $("#map").height()+unit+ 'px'
                });
});
    $(".btn-shrink").on("click", function(){
    unit = unit+ unit; 
    $("#map").animate({ 
                'height':  $("#map").height()+'-'+unit+ 'px'
        });
});
});

#map {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(0, 0, 0);
  cursor: move;
  overflow: hidden;
  Background-image: url('https://i.pinimg.com/originals/dd/a5/17/dda5177a3db95a93c0c84ff6847fda23.jpg');
  background-repeat: no-repeat;
    background-size:cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <button type="button" class="btn-shrink">-</button>
  <button type="button" class="btn-enlarge">+</button>
<div id="map"></div>

Answer 1

您始终可以使用+= 和-=

jQuery(function( $ ) {

  var step = 10;

  $(".btn-enlarge, .btn-shrink").on("click", function() {
    var sym = $(this).is(".btn-enlarge") ? "+=" : "-=";
    $("#map").animate({height: sym + step});
  });
  
});

#map {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(0, 0, 0);
  background: url('/image/O724n.jpg') 50% 50% / contain no-repeat;
}

<button type="button" class="btn-shrink">-</button>
<button type="button" class="btn-enlarge">+</button>
<div id="map"></div>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

以上内容

$("#map").animate({height: sym + step});

翻译为:

$("#map").animate({height: "+=10"}); // or
$("#map").animate({height: "-=10"}); // depending on the clicked button