Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Reposicionar elementos suavemente

Estas en el tema de Reposicionar elementos suavemente en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/09/2012, 10:54
 
Fecha de Ingreso: agosto-2011
Mensajes: 58
Antigüedad: 9 años, 3 meses
Puntos: 3
Reposicionar elementos suavemente

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.
  #2 (permalink)  
Antiguo 30/09/2012, 11:10
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 13 años, 5 meses
Puntos: 1567
Respuesta: Reposicionar elementos suavemente

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 30/09/2012, 11:29
 
Fecha de Ingreso: agosto-2011
Mensajes: 58
Antigüedad: 9 años, 3 meses
Puntos: 3
Respuesta: Reposicionar elementos suavemente

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.
  #4 (permalink)  
Antiguo 30/09/2012, 11:51
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 18 años
Puntos: 317
Respuesta: Reposicionar elementos suavemente

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.
  #5 (permalink)  
Antiguo 30/09/2012, 12:26
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 13 años, 5 meses
Puntos: 1567
Respuesta: Reposicionar elementos suavemente

Cita:
Iniciado por naggety Ver Mensaje
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:
Cita:
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.

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 30/09/2012, 15:22
 
Fecha de Ingreso: agosto-2011
Mensajes: 58
Antigüedad: 9 años, 3 meses
Puntos: 3
Respuesta: Reposicionar elementos suavemente

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:
Ver original
  1. $('.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.
  #7 (permalink)  
Antiguo 30/09/2012, 17:58
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 18 años
Puntos: 317
Respuesta: Reposicionar elementos suavemente

Cita:
Iniciado por naggety Ver Mensaje
Lo que ya tengo es simplemente lo siguiente:
Código Javascript:
Ver original
  1. $('.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.
  #8 (permalink)  
Antiguo 04/10/2012, 16:47
 
Fecha de Ingreso: agosto-2011
Mensajes: 58
Antigüedad: 9 años, 3 meses
Puntos: 3
Respuesta: Reposicionar elementos suavemente

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

Gracias por la ayuda.
  #9 (permalink)  
Antiguo 04/10/2012, 17:27
Avatar de Sirikon  
Fecha de Ingreso: marzo-2009
Mensajes: 82
Antigüedad: 11 años, 7 meses
Puntos: 11
Respuesta: Reposicionar elementos suavemente

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.
  #10 (permalink)  
Antiguo 04/10/2012, 20:45
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 18 años
Puntos: 317
Respuesta: Reposicionar elementos suavemente

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...
  #11 (permalink)  
Antiguo 06/10/2012, 15:15
Avatar de Sirikon  
Fecha de Ingreso: marzo-2009
Mensajes: 82
Antigüedad: 11 años, 7 meses
Puntos: 11
Respuesta: Reposicionar elementos suavemente

Cita:
Iniciado por furoya Ver Mensaje
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!
  #12 (permalink)  
Antiguo 07/10/2012, 07:37
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 18 años
Puntos: 317
Respuesta: Reposicionar elementos suavemente

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.
  #13 (permalink)  
Antiguo 17/10/2012, 08:48
 
Fecha de Ingreso: agosto-2011
Mensajes: 58
Antigüedad: 9 años, 3 meses
Puntos: 3
Respuesta: Reposicionar elementos suavemente

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:
Ver original
  1. $mostrados = $('.mostrados');
  2. $mostrar = $('.mostrar');
  3. $mostrados.fadeOut( 800, function () {
  4.     $mostrar.fadeIn(800);
  5. });

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.
  #14 (permalink)  
Antiguo 17/10/2012, 13:46
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 18 años
Puntos: 317
Respuesta: Reposicionar elementos suavemente

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
  #15 (permalink)  
Antiguo 18/10/2012, 02:18
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 9 años, 10 meses
Puntos: 206
Respuesta: Reposicionar elementos suavemente

Cita:
Iniciado por naggety Ver Mensaje
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?
  #16 (permalink)  
Antiguo 18/10/2012, 15:10
 
Fecha de Ingreso: agosto-2011
Mensajes: 58
Antigüedad: 9 años, 3 meses
Puntos: 3
Respuesta: Reposicionar elementos suavemente

¡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.

Etiquetas: elementos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:34.