如何切換（或縮放）以減小 DIV 的垂直大小（但僅減小到初始高度的 30%）

Question

所以我有一個跨越頁面寬度的 DIV（地圖），但我希望有一個按鈕，用戶可以單擊“隱藏/取消隱藏”DIV，單擊時基本上會做三件事：

1. 將 div 的垂直高度縮放到原始高度的 25%...
2. 將 DIV 更改為 opacity.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>

Answer 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/

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

希望這可以幫助。 干杯