expand/contract container on hide/show animation

Я думал, что есть простой способ сделать жидкость для высоты контейнера во время изменения размера анимации, но если так, то я забыл. Прежде чем я сделаю это программно, я подумал, что испытаю здесь свою удачу.expand/contract container on hide/show animation

Идея заключается в том, что нижняя <hr /> должна плавно двигаться вверх/вниз, как #content оживляет, вместо того, чтобы щелкать на месте после анимации - это из-за #container не изменение размера.

See Fiddle

HTML:

<button id="trigger">trigger</button> 
<hr /> 
<div id="container"> 
    <div id="content">foo 
     <br />foo 
     <br />foo 
     <br />foo 
     <br />foo 
     <br /> 
    </div> 
</div> 
<hr />

JS:

$('#trigger').click(function() { 
    var $content = $('#content'); 
    if (!$content.hasClass('hidden')) { 
     $content.stop(true, true).hide('drop', { 
      easing: 'easeInQuad', 
      direction: 'up' 
     }, 'slow'); 
     $content.addClass('hidden'); 
    } else { 
     $content.stop(true, true).show('drop', { 
      easing: 'easeInQuad', 
      direction: 'up' 
     }, 'slow'); 
     $content.removeClass('hidden'); 
    } 
});

источник

2013-08-26 vol7ron

Вы можете просто использовать slideToggle, чтобы изменить размер контейнера для достижения этого эффекта?

JQuery

$('#trigger').on('click', function() { 
    var $content = $('#content'); 
    $content.slideToggle(1000); 
});

JSFiddle example.

источник

2013-08-26 23:10:39 kunalbhat

хороший вопрос, но нет, 'slideToggle' не имеет тот же эффект замирания. Кроме того, 'hr' предназначен для демонстрационной цели, заменяя элемент ниже; другое содержание, естественно, было бы вместо «hr» – vol7ron

Прохладный, тогда я удалю альтернативный пример. Итак, вы хотите сделать 2 вещи? 1) Эффект Fade от вашей оригинальной демонстрации и 2) измените размер контейнера, чтобы элементы после него оживили его. – kunalbhat

Всякий раз, когда я начинаю что-то конструировать, мне нравится иметь варианты и позволять конечному пользователю в конечном итоге внести вклад в то, что лучше. Для этого было бы идеально, если бы это сработало с любой анимацией - представьте, что оставшийся плавающий контент и анимация идут справа налево. В этом конкретном случае «slideToggle», вероятно, является хорошим резервным, но «swing» или «drop» были бы идеальными. Я думал, что я решил это раньше, поэтому мне придется заглянуть в мой репертуар кода, возможно, я приковал анимацию или сделал обратный вызов во время. Я спросил здесь, потому что думал, что это будет простое решение для CSS. – vol7ron

Fiddle

Мысль есть был бы CSS решение. Вместо этого он выглядит как анимационные работы; Однако, это просто слайд/увядает и не использует drop:

$('#trigger').click(function() { 
    var $content = $('#content'); 
    if (!$content.hasClass('hidden')) { 
     $content.stop(true,true).animate({height:'hide',opacity:'hide'},'slow','easeInQuad'); 
     $content.addClass('hidden'); 
    } else { 
     $content.stop(true,true).animate({height:'show',opacity:'show'},'slow','easeInQuad'); 
     $content.removeClass('hidden'); 
    } 
});

источник

2013-08-27 03:15:47 vol7ron

expand/contract container on hide/show animation

ответ

Смежные вопросы