如何切换(或缩放）以减少DIV's垂直尺寸(但仅为初始高度的30%）

How to Toggle (or Scale) to reduce a DIV's vertical size (but only to 30% of initial height)

本文关键字：高度 垂直 缩放 何切换 DIV      更新时间：2023-09-26

所以我有一个横跨页面宽度的div(地图(，但我希望有一个按钮，用户可以点击它来"隐藏/取消隐藏"div，点击它时基本上会做三件事：

  1. 将div的垂直高度缩放为原始高度的25%
  2. 将DIV更改为不透明度.3，使其在降低高度时褪色
  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>

试试这样的东西：

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/

基于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);
});

希望这能有所帮助。干杯

相关文章：