Ver Mensaje Individual
  #12 (permalink)  
Antiguo 07/10/2012, 07:37
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
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.