jQuery: ¿Hay alguna manera de animar el ancho de un div sin ningún movimiento de texto?

estoy usando jQuery para reducir la anchura de un div 's, de esta manera:jQuery: ¿Hay alguna manera de animar el ancho de un div sin ningún movimiento de texto?

$('div#foo').animate({width: 0},someSpeed);

Si bien está encogiendo, el texto se reajusta para adaptarse a la cada vez más delgada div. No quiero que esto suceda, quiero que el texto permanezca como está, desapareciendo de la vista a medida que disminuye el ancho, como ocurre si haces $('div#foo').slideUp().

¿Hay algún truco de CSS u otra forma de hacerlo funcionar?

Fuente

2011-02-03 Nathan Long

OT: ¿Cómo lidiar con los contenidos de texto que se vuelven a mostrar después de que el ancho llega a 0? Tengo que usar append '.hide (0)' para mantener el texto oculto - ver aquí: http://jsfiddle.net/AvYyT/ –

@ Šime Vidas - De hecho, hice esto originalmente, pero lo simplifiqué para mi pregunta: '$ (this) .animate ({width: 0, opacity: 0}, speed, function() {$ (this) .css ('display', 'none');});'. Entonces, cuando termina con la animación, establece la pantalla en none. –

de demostración en vivo:http://jsfiddle.net/AvYyT/1/

El truco es utilizar un recipiente interior y establecer su con a la anchura del contenedor exterior.

Fuente

2011-02-03 14:11:50

Sí, eso parece ser lo que está buscando. Célebre. –

-1

tratar dándole vertical-align:top

Fuente

2011-02-03 13:35:31 WEBProject

No cambió nada. –

Si está adivinando, adivine un comentario. Publique una respuesta solo si está seguro de que funciona. –

En su div CSS, utilice: overflow-x: hidden; overflow-y: hidden;

Fuente

2011-02-03 13:44:13

No cambió nada. –

@David Si estás adivinando, adivina un comentario. Publique una respuesta solo si está seguro de que funciona. –

@ Šime, ¿cómo sabes que no estaba "bastante seguro" de que funcione, lo que sea que eso signifique? Sabes que eres una especie de matón de StackOverflow, ¿verdad? – Dutchie432

Puede usar jQuery para establecer el ancho del contenido al con de la div, añadir overflow:hidden a la div y sólo entonces reducir el ancho

Algo así (no probado, podría tener errores tipográficos, pero se entiende la idea ...):

var el = $('div#foo'); 
el.children().each(function() { 
    $(this).width(el.width()); 
}); 
el.css('overflow', 'hidden').animate({width: 0}, someSpeed);

Pero depende de los contenidos de la div, esto no funcionaría si hay imágenes en su interior .

Fuente

2011-02-03 14:07:59 jeroen

Establecer el ancho del elemento secundario al valor exacto del ancho principal no es seguro. Si el niño tiene relleno, márgenes y/o bordes, el niño se convertirá en ancho, consulte aquí: http://jsfiddle.net/AvYyT/3/. Para tratar con esto, debes restar la diferencia '$ (this) .outerWidth (true) - $ (this) .width()', mira aquí: http://jsfiddle.net/AvYyT/4/ –

@ Šime Vidas: Como dije, depende del contenido del 'div ', simplemente estoy ilustrando la idea con una muestra de código. – jeroen

Una opción es usar white-space: nowrap; en el div. El único problema es que tendrá que agregar saltos de línea manualmente si tiene un cuerpo largo de texto.

Fuente

2011-02-03 14:31:38

Esto funciona con ancho máximo, en cuyo caso también es posible que desee usar 'overflow: auto', y no requiere elementos adicionales. – chad

¿cómo podemos hacer esto cuando tenemos texto largo y el texto es dianmic –

@jitendravarshney Si tiene una pregunta diferente, entonces es mejor hacer una nueva pregunta –

jQuery: ¿Hay alguna manera de animar el ancho de un div sin ningún movimiento de texto?

Respuesta

Cuestiones relacionadas