如何切换（或缩放）以减小 DIV 的垂直大小（但仅减小到初始高度的 30%）答案

【问题标题】：How to Toggle (or Scale) to reduce a DIV's vertical size (but only to 30% of initial height)如何切换（或缩放）以减小 DIV 的垂直大小（但仅减小到初始高度的 30%）
【发布时间】：2011-07-02 21:57:11
【问题描述】：

所以我有一个跨越页面宽度的 DIV（地图），但我希望有一个按钮，用户可以单击“隐藏/取消隐藏”DIV，它基本上会做三件事点击：

将 div 的垂直高度缩放为原始高度的 25%...
将 DIV 更改为不透明度 0.3，使其在降低高度时褪色...
再次点击时恢复正常高度和不透明度 (1)

这是我到目前为止所得到的：目前它只缩小到正确的垂直高度

非常感谢您的帮助...

<!-- JQUERY STUFF ADDED IN THE HEAD-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<!-- THE CODE -->
<div id="map">
    Map Content Is Here
</div>

<p class="hidemap">HIDE MAP</p>

<script>
  $(document).ready(function() {
  $("p.hidemap").click(function () {
    $("#map").effect("scale", { percent: 25, direction: 'vertical' }, 500);
    });

   });
</script>

【问题讨论】：

标签： javascript jquery toggle scale effect

【解决方案1】：

试试这样的：

var orig_height = $('#map').height();

$('.hidemap').click(function()
{
    if($('#map').height() == orig_height)
    {
        var new_height = Math.floor(orig_height * .25) + 'px';
        var new_opacity = '.3';
    }
    else
    {
        var new_height = orig_height + 'px';
        var new_opacity = '1';
    }
    $('#map').animate(
    {
        height: new_height,
        opacity: new_opacity
    },1000);
});

工作示例：http://jsfiddle.net/X4NaV/

【讨论】：

非常感谢。但是有一件事：如果您查看上面的工作示例并将所需的高度从 .25 更改为 .01，您会看到 div 中的内容仍然存在（如果您输入更多文本，则更容易看到......但我也希望 div 中的任何内容都被切断（或从底部减少）。非常感谢帮助
你不能那样做。 Div 的最小高度为 18 像素。如果你想让它完全消失，你可以试试 $('#map').slideUp() 和 $('#map').slideDown()
啊 - 实际上 18 像素很好我正在将它减少到大约 150 像素左右......但问题是我的地图在一个 div 中（所以我实际上是减少包含地图的 div（来自谷歌地图）......但是当我这样做时，地图会从底部弹出并保持在原始高度（而包含地图的 div 减少到 25%）。
添加溢出：隐藏；到#map css
不确定该评论是否有意义，但一个很好的例子是，如果你回到你的工作示例并输入一整段 50 px 高的文本并再次尝试，基本上就是这样发生在我的地图上。谢谢！

【解决方案2】：

根据 Alien 的，这里有：

<div id="map" style="overflow:hidden"> <!-- Look at the style -->
    Map Content Is Here <br>
    This is the seccond line
</div>

<p class="hidemap">HIDE MAP</p>

脚本：

var orig_height = $('#map').height();

$('p.hidemap').click(function()
{
    var new_height = orig_height;
    var new_opacity = 1;
    if($('#map').height() == orig_height){
        new_height = Math.floor(orig_height * .01);
        new_opacity = .3;
    }
    $('#map').animate({
        height: new_height,
        opacity: new_opacity
    }, 2000);
});

希望这会有所帮助。干杯

【讨论】：