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

发布于 2024-11-17 23:55:22 字数 849 浏览 1 评论 0原文

所以我有一个横跨页面宽度的 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>

原文

So I've got a DIV (a map) that goes across the width of the page, but i'd like to have a button users can click to "Hide/Unhide" the DIV that will basically do three things when clicked:

scale the vertical height of the div to 25% of the original height...
Change the DIV to have opacity .3 so its faded when at its reduced height...
Revert back to normal height & opacity (1) when clicked again

Here's what I've got so far: Currently it only scales down to the correct vertical height

Really appreciate the help...

<!-- 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安稳善良 2024-11-24 23:55:22

尝试这样的事情：

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/

Try something like this:

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

Working example: http://jsfiddle.net/X4NaV/

回复收藏 0 原文

肤浅与狂妄 2024-11-24 23:55:22

基于外星人的，这里有：

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

希望这有帮助。干杯

Based on Alien's, here you have:

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

The script:

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

Hope this helps. Cheers

回复收藏 0 原文

~没有更多了~