Как переключить (или масштабировать), чтобы уменьшить вертикальный размер DIV (но только до 30% от начальной высоты) - PullRequest
Новая
       15

Как переключить (или масштабировать), чтобы уменьшить вертикальный размер DIV (но только до 30% от начальной высоты)

0 голосов
/ 03 июля 2011

Итак, у меня есть 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>

Ответы [ 2 ]

0 голосов
/ 03 июля 2011

На основании инопланетян, здесь у вас есть: 

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

Надеюсь, это поможет. Приветствия

0 голосов
/ 03 июля 2011

Попробуйте что-то вроде этого: 

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/

...