Анимировать DIV на полную высоту и переключиться обратно на заданную высоту - PullRequest
Новая
       22

Анимировать DIV на полную высоту и переключиться обратно на заданную высоту

1 голос
/ 18 июля 2011

Я пытаюсь оживить div на полную высоту при нажатии кнопки и вернуться к исходной высоте при повторном нажатии кнопки. Полная высота div является автоматической, поскольку она содержит текст с различным количеством слов. Я попытался сделать приведенные ниже коды, но он не работает должным образом.

CSS: 

.category_brief{
    text-align:justify;
    height:100px;
    overflow:hidden;
}

Пример 1: Этот код не анимирует div при открытии на полную высоту, но оживляет при возврате к старой высоте. 

$(".slide").toggle(function(){
    $('.category_brief').animate({height:'100%'},200);
  },function(){
    $('.category_brief').animate({height:100},200);
  });

Пример 2: Вывод этого кода такой же, как в Примере 1 

var toggle = true, oldHeight = 0;

$('.slide').click(function(event) {
    event.preventDefault();

    var $ele = $('.category_brief');
    var toHeight = ((toggle = !toggle) ? oldHeight : newHeight);

    oldHeight = $ele.height();
    var newHeight = $ele.height('auto').height();
    $ele.animate({ height: toHeight });

});

Пример 3. Этот код анимирует div на полную высоту, но не переключает его. 

    var slide = $('.slide');
    var slidepanel = $('.category_brief');
  // On click, animate it to its full natural height
  slide.click(function(event) {
      event.preventDefault();
    var oldHeight, newHeight;

    // Measure before and after
    oldHeight = slidepanel.height();
    newHeight = slidepanel.height('auto').height();

    // Put back the short height (you could grab this first
    slidepanel.height(oldHeight);
    slidepanel.animate({height: newHeight + "px"});
  });

Если возможно, пожалуйста, предоставьте немного объяснений, так как я новичок ..

Обновление: Решено идеей от @chazm ..

@ chazm: спасибо за идею. Я получил его, скомбинировав 1-й и 3-й пример ... Вот код на случай, если кому-то это понадобится. 

var slidepanel = $('.category_brief');
    $(".slide").toggle(function(){
    var oldHeight, newHeight;

    // Measure before and after
    oldHeight = slidepanel.height();
    newHeight = slidepanel.height('auto').height();

    // Put back the short height (you could grab this first
    slidepanel.height(oldHeight);
    slidepanel.animate({height: newHeight + "px"})
  },function(){
    $('.category_brief').animate({height:100},300);
  });

Ответы [ 2 ]

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

Решение зависит от ваших потребностей внедрения.Если вы знаете, что сначала div должен иметь высоту 100px и т. Д., А когда вы нажимаете, он максимизируется до неизвестной высоты, будет работать следующее решение.Если бы у вас была структура, похожая на 

<div class="outer">
    <div class="wrapper">Content of unknown length here</div>
</div>

и css 

div.wrapper { position:relative; height:100px; overflow:hidden; }
div.outer { position:absolute; height:auto; }

, вы бы получили div, высота которого составляет 100 пикселей, с содержимым, не помещающимся в 100 пикселейотрезать.Теперь, когда вы нажимаете нужную кнопку, вы можете получить высоту div-обертки, поскольку она длинна, поскольку ее содержимое (даже если вы видите только верхние 100 пикселей), и установить высоту внешнего div-элемента в соответствии с ней.Вот так 

var newHeight = $('div.wrapper').height();
$('div.outer').animate({height:newHeight},200);

, который затем оживит внешний div для отображения всего содержимого.Когда вы снова нажмете кнопку, вы можете просто сделать 

$('div.outer').animate({height:'100px'},200);

И у вас снова будет только высота 100 пикселей.

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

Работа с «автоматической» высотой это всегда довольно сложно.Я думаю, что в ваших примерах есть разные проблемы.

1) Браузер не может определить правильную 100% высоту.Возможные решения - определить высоту всем своим родителям.Либо установите его на 100% (до тега html), либо установите ближайший родительский элемент как относительный (поскольку высота рассчитывается из ближайшего относительного родительского элемента).Если вы хотите анимировать div на 100% всей страницы - подумайте об абсолютном позиционировании

2) То же, что и выше, я предполагаю

3) Когда этот код должен переключаться назад, он можетне определить, что должно стать ниже, чем сейчас.Не совсем уверен, почему, хотя.Вероятно, потому, что высота 'auto' со 100% установлена ​​на что-то неправильное.Вы можете проверить в firebug, какое значение он имеет на вычисляемой вкладке после возврата этой функции.Вероятно, это даст вам подсказку

Попробуйте объединить 2) и 3).Идея в том, что если переключатель имеет значение true (его следует опустить), тогда установите newHeight = slidepanel.height ('100').

...