Как предотвратить изменение ширины при использовании слайд-модуля jQuery?

Question

У меня есть тест-случай здесь:

http://www.jsfiddle.net/kPBbb/

После того, как содержание имеет .content, в .wrapper самого термоусадочных обертки, предположительно потому, что .content является display: none ред. Я бы хотел, чтобы .wrapper вел себя так, как будто .content все еще были там после анимации, поддерживая начальный размер.

.wrapper был float: left-й изда, чтобы показать проблему (заставляя поведение термоусадочной пленки), но не всегда может быть, поэтому я хотел бы решение, которое не делает вовлекает чтение ширины перед анимацией и повторное использование этого после.

Есть ли простое исправление?

Answer 1

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

.wrapper{ 
    width: 200px; 
} 

Я не уверен, есть ли лучшее или более общее решение этой проблемы.

Answer 2

Вместо использования дисплея: нет вы можете использовать visibility:hidden, а затем visibility:visible для отображения информации.

display:none 

Это будет действовать, как если бы данные не на странице и поэтому оболочка будет сжиматься себя, как только свойство отображения изменяется на none

visibility:hidden 

Видимость позволяет данные по-прежнему будет хранится на своем месте на странице, но просто невидим.

Попробуйте это и посмотрите, поможет ли это вам с вашим вопросом.

Answer 3

Или сделать его динамичным, попробуйте следующее:

var contentWidth = $('.content').width(); 

$('.header').width(contentWidth); 

Answer 4

Я бы лично это сделать:

$('.wrapper').each(function() { 
    var wrapper = this; 
    $('.header', wrapper).click(function() { 
    $(this).css('width',$(this).width()); 
    $('.content', wrapper).slideToggle(); 
    }); 
});​ 

Но, может быть, вы даже можете сделать это:

$('.wrapper').each(function() { 
    var wrapper = this; 
    $('.header', wrapper).click(function() { 
     $('.content', wrapper).slideToggle('slow',function(){ 
      $('.content', wrapper).show(); 
      $('.content', wrapper).css('visibility','hidden'); 
      $('.content', wrapper).css('height','0px'); 
     }); 
    }); 
});