Reposicionar elementos suavemente

[naggety]

Hola.

Querría saber cómo puedo hacer lo siguiente: de una serie de elementos, al hacer click en un botón desaparecen algunos de esos elementos (utilizo para ello fadeOut de jQuery). Entonces, el resto de elementos son reposicionados automáticamente, pero de una forma muy brusca.

¿Cómo puedo conseguir que los elementos que se quedan se muevan a su nueva posición suavemente?

Si hace falta no me importa utilizar algún plugin o algo similar.

Muchas gracias.

[emprear]

Ya que estás con jQuery, probá con animate()
http://api.jquery.com/animate/
El demo 2 por ejemplo

Saludos

[naggety]

Hola emprear.

Ya conocía animate(), pero el problema es que no sé cómo fijar el elemento a donde está actualmente, y obtener la posición a la que tiene que ir para mandarlo ahí con animate.

No sé si me he explicado.

[furoya]

Hola todos.

naggety : En el sitio oficial debe haber documentación suficiente para configurar el JQuery.
Y en este sitio debe haber mucha gente que lo conozca como para asesorarte; pero lo mejor es que preguntés en el foro que corresponde, que es el de frameworks (éste es para javascript "puro"). Y por supuesto, que acompañes la duda con un ejemplo de lo que ya tenés.

[emprear]

Iniciado por naggety

Hola emprear.

Ya conocía animate(), pero el problema es que no sé cómo fijar el elemento a donde está actualmente, y obtener la posición a la que tiene que ir para mandarlo ahí con animate.

No sé si me he explicado.

Yo más bien diría que hagas tus planteos en forma correcta, porque, y cito:

Entonces, el resto de elementos son reposicionados automáticamente, pero de una forma muy brusca.

Presupone que las posiciones ya las tenías no que las tenés que averiguar.
Caso contrario se transforma el post en una ida y vuelta sin sentido alguno.

[naggety]

Hola.

Furoya: lo publico aquí porque no pido una solución que sea necesariamente con jQuery. Si aún así consideráis que debo cambiarlo, hacedlo por mi o lo haré yo mismo.

Lo que ya tengo es simplemente lo siguiente:

Código Javascript:

$('.claseDivsAEliminar').fadeOut(400);
 

Los div tienen un ancho fijo y float:left

Emprear: tienes toda la razón, no me he explicado bien. Cuando digo que los elementos son reposicionados, me refería a que los reposiciona el navegador, ya que a los anteriores se les ha aplicado display:none.

Por tanto, el reposicionamiento, al ser el del navegador, a la vista queda muy brusco. Pero como digo no es un reposicionamiento que haya programado yo.

[furoya]

Iniciado por naggety

Lo que ya tengo es simplemente lo siguiente:

Código Javascript:

$('.claseDivsAEliminar').fadeOut(400);
 

Bueno, lo que tenés es JQuery, y quien tiene que decidir si se cambia de foro sos vos.

Si estás en condiciones de escribir (o al menos comprender una explicación para escribir) un código JS, entonces podés seguir acá.
Si no tenés la menor idea, y querés algo para copiar y pegar, podés esperar aquí a que alguien haga el trabajo por vos; o moverte directamente a Frameworks, porque seguro ahí te explican cómo configurar esa library que ya tenés pre-hecha.

[naggety]

Finalmente no me voy a complicar tanto y voy a usar un efecto más sencillo.

Gracias por la ayuda.

[Sirikon]

Si en vez de hacer que desaparezca directamente hicieras que:

1.- Reducir la opacidad a 0
2.- Al mismo tiempo, reducir el ancho del que tenga a 0
3.- Una vez terminados estos efectos, display:none

Esto haría que al reducirse el ancho gradualmente no sería tan brusco el que desaparezca.

[furoya]

Excelente idea . Te estarías ahorrando el JQ, naggety.

Hay que ver si en tu diseño los elementos flotan (natural o artificialmente) como para que se reacomoden realmente sin saltos. Quizá haya que elegir si se achica en ancho o en alto o ambos, según el caso. Pero eso sería fácil.

Hay que hacerlo sobre el código, eso sí. Uno "que se adapte solo" a cualquier diseño, va a ser difícil...

[Sirikon]

Iniciado por furoya

Excelente idea . Te estarías ahorrando el JQ, naggety.

Hay que ver si en tu diseño los elementos flotan (natural o artificialmente) como para que se reacomoden realmente sin saltos. Quizá haya que elegir si se achica en ancho o en alto o ambos, según el caso. Pero eso sería fácil.

Hay que hacerlo sobre el código, eso sí. Uno "que se adapte solo" a cualquier diseño, va a ser difícil...

Tan difícil como que habría que obtener todos los elementos del campo donde va a desaparecer el elemento, fijarlos en esa position con position absolute y usando top y left, almacenar estos datos, calcular los movimientos que tendría que hacer, realizarlos, y volver al css inicial.

Bastante complicadillo, pero eh, no imposible.

Saludos!

[furoya]

En realidad, no.
O te entendí mal, y tu idea no es tan excelente.

Lo de la opacidad es un lujo innecesario, pero al cambiar el tamaño gradualmente los elementos que haya al lado del desaparecido (o reaparecido) se tienen que acomodar también gradualmente. Y por sí mismos, sin ubicar sus coordenadas con un escript.

Insisto, depende muchísimo del diseño donde se vaya a aplicar. Acá hay un ejemplo elemental.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REACOMODA.</title>
<script type="text/javascript">
var alfa, bravo, charly;

function cambia0(T){
clearTimeout(charly);

if(T!="") {
 alfa = document.getElementsByTagName( "img" )[T];
 bravo = (alfa.style.width != "0%") ? -1 : 1;

 if(alfa.style.width == "0%") {
  alfa.style.width = "1%";
 }


 else {
  alfa.style.width = "29%";
 }
}

cambia1();
}

function cambia1() {
 if(alfa.style.width != "0" && alfa.style.width != "30%") {
 alfa.style.width = parseInt(alfa.style.width) + (1*bravo) +"%";
 document.title= alfa.style.width;
 charly = setTimeout(cambia1 , 30);
 }
}
</script>
<style type="text/css">
* {margin: 0; padding: 0; border-collapse: collapse; }
html {width: 100%; }
body {width: 100%; }
div {width: 90%; float: left; }
img {width: 30%; vertical-align: middle; }
select {float: left; }
</style>
</head>
<body>
<div><img src="http://imageshack.us/a/img651/6254/ultrarreciclable.jpg" title="0"><img 
src="http://imageshack.us/a/img839/6245/claudioroncoli.jpg" title="1"><img 
src="http://imageshack.us/a/img715/92/diegofocaccio.jpg" title="2"></div>
<div><img src="http://imageshack.us/a/img38/9316/grafiti05.jpg" title="3"><img 
src="http://imageshack.us/a/img72/2886/eugeniopalmagenoves.jpg" title="4"><img 
src="http://imageshack.us/a/img715/9418/grafiti04.jpg" title="5"></div>

<select onchange="cambia0(this.value)"><option value="">-</option>
<option value=0>0</option><option value=1>1</option>
<option value=2>2</option><option value=3>3</option>
<option value=4>4</option><option value=5>5</option>
</select>
</body>
</html>

El selector que está al costado permite elegir qué imágenes aparecen o desaparecen.

[naggety]

Furoya, ahora estudiaré tu código más detenidamente y lo probaré.

De todas formas, doy la solución que utilicé. Como ya estaba usando jQuery para otras cosas, lo usé para esto también.

Código Javascript:

$mostrados = $('.mostrados');
$mostrar = $('.mostrar');
$mostrados.fadeOut( 800, function () {
    $mostrar.fadeIn(800);
});
 

fadeOut oculta progresivamente los que estaban mostrados, reduciendo su opacidad suavemente hasta 0 y le aplica display none. Al acabar, fadeIn muestra de forma progresiva los elementos a mostrar, aumentando suavemente su opacidad.

No es el efecto que buscaba al principio, pero este es muy sencillo y no queda mal.

[furoya]

Bueno, me alegra que de alguna forma lo hayas resuelto.

En realidad el ejemplo no es mío, sino de Sirikon. Aunque no volvió para confirmarlo, estoy seguro de que era eso lo que estaba proponiendo.
Y tiene un uso muy limitado, casi que no se adapta a cualquier diseño.
Pero no deja de ser una opción más.

Lo que te agradezco es que hayas regresado a contar cómo te fue, y cómo resolviste el asunto. Por lo general una vez que consiguen lo que buscan, aquí ni aparecen para colaborar. Supongo que es una cuestión de educación.
Yo no entiendo de jquery, pero seguramente esas líneas le van a ser de utilidad aquienes vengan buscando información sobre transiciones.

Saludos
furoya

[marlanga]

Iniciado por naggety

Hola.

Querría saber cómo puedo hacer lo siguiente: de una serie de elementos, al hacer click en un botón desaparecen algunos de esos elementos (utilizo para ello fadeOut de jQuery). Entonces, el resto de elementos son reposicionados automáticamente, pero de una forma muy brusca.

¿Cómo puedo conseguir que los elementos que se quedan se muevan a su nueva posición suavemente?

Si hace falta no me importa utilizar algún plugin o algo similar.

Muchas gracias.

¿Has probado a usar un $().hide("slow") en vez del fadeOut?

[naggety]

¡Vaya!

No tengo aún mucha experiencia con jQuery, así que no conocía hide(), y está muy bien. Este trabajo ya está entregado así que ahora ya no lo voy a usar en él, pero me has hecho un gran descubrimiento para el futuro, marlanga.

Furoya: ¡faltaría más! De hecho, perdonad que tardara tanto en volver a contestar, pero no entro habitualmente al foro así que no lo había visto.

Gracias a todos.