jQuery UI efecto ciego - revelar desde abajo

Question

Esto podría ser realmente obvio y me falta completamente.

He buscado durante horas y parece que no puedo encontrar la manera de, usando jQuery, revelar un div oculto de abajo arriba. Lo que intento lograr es exactamente como en el siguiente enlace, pero a la inversa: http://jqueryui.com/demos/show/

Puedo deslizar un div desde la parte inferior a la superior, pero esto se revela a medida que se mueve, en lugar de estar "enmascarado"

Como dije, esto podría (¿debería?) Ser realmente obvio y no lo estoy viendo, pero he estado buscando las edades y no puedo encontrar una solución a este problema relativamente simple.

Gracias,

Ronnie

Answer 1

El efecto que estás buscando es un poco difícil de lograr, pero se puede hacer, incluso sin un elemento de envoltura.

El problema principal aquí es que los elementos se renderizan naturalmente de arriba hacia abajo, no de abajo hacia arriba. La animación de ambos los top y height propiedades CSS de un elemento posicionado relativamente nos permite aplicar un efecto slide-up, pero el elemento todavía hará que de arriba hacia abajo:

+-------------------------------------------+ 
|           |^
|           | | Hidden area collapses upwards. 
|           | | 
+-------------------------------------------+ <-- 'top' 
|           |^
| | Upper part of element (visible).  | | 
| |          | | Animation goes bottom-up. 
| | Element still renders top-down.  | | 
| |          | | 
+--|----------------------------------------+ <-- 'top + height' 
| |          | | 
| | Lower part of element (hidden).  | | 
| V          | | 
+-------------------------------------------+ 

Si queremos simular la prestación de abajo hacia arriba , tenemos que modificar la propiedad scrollTop del elemento durante la animación, a fin de que su parte inferior para permanecer siempre a la vista:

+-------------------------------------------+ 
|           |^
| | Upper part of element (hidden).  | | Hidden area collapses upwards. 
| |          | | 
+--|----------------------------------------+ <-- 'top' and 'scrollTop' 
| |          |^
| | Element still renders top-down.  | | 
| |          | | Animation goes bottom-up. 
| | Lower part of element (visible).  | | 
| V          | | 
+-------------------------------------------+ <-- 'top + height' 

podemos utilizar animate() con scrollTop, pero si lo hace conjuntamente con top y height no funcionó correctamente en mis pruebas (sospecho que scrollTop se restablece cuando top o height se modifican en el primer paso de animación, por lo que termina pegado a 0).

Para solucionar esto, podemos manejar el scrollTop nosotros mismos a través de la función opcional que podemos pasar al animate(). Esta función se llama con dos argumentos, now y fx, now siendo el valor actual de la propiedad animada y fx como un objeto contenedor alrededor de información útil, como el elemento y la propiedad que se está animando.

Desde siempre queremos scrollTop a ser el mismo que top, sólo tenemos que probar si top está siendo animado en nuestra función step. Si es así, establecemos scrollTop en now. Esta solución da resultados aceptables, aunque parpadea un poco demasiado para mi gusto (aunque podría ser un artefacto de mi navegador).

Así, en resumen, para poner en práctica este sentido, tenemos que:

• Fetch altura original del elemento,
• Hacer el elemento position: relative; para que podamos animar su propiedad top,
• Contraer el elemento al establecer top a la altura original y height a 0,
• Mostrar el elemento (necesario en su violín ya que se aplica display: none;),
• Animate top-0 y height a la altura original,
• Dar scrollTop el valor de top en cada paso de animación.

resultante en el siguiente código:

$("#click").click(function() { 
    var $revealMe = $("#revealMe"); 
    var originalHeight = $revealMe.height(); 
    $revealMe.css({ 
     position: "relative", 
     top: originalHeight, 
     height: 0 
    }).show().animate({ 
     top: 0, 
     height: originalHeight 
    }, { 
     duration: 1000, 
     step: function(now, fx) { 
      if (fx.prop == "top") { 
       $(fx.elem).scrollTop(now); 
      } 
     } 
    }); 
}); 

puede probarlo en this fiddle.

Answer 2

¿Qué tal en lugar de ciega, utilizando diapositivas con una opción de dirección? Aquí hay un jsFiddle example.

jQuery:

$("#effect").show('slide', { direction: "down" } , 500); 

Answer 3

¿Esto no hace el truco:

$("div").show('blind', {}, 'slow'); 

Answer 4

Si eres uso de la biblioteca jQuery UI tu bien puede:

$("div").hide("blind", {"direction": "down"}); 
$("div").show("blind", {"direction": "down"}); 

Answer 5

Ciegos Efecto dirección por defecto: "up".

Valores posibles: up, down, left, right, vertical, horizontal.

Documentation

Ejemplo:

$(document).click(function() { 
 
    $("#toggle").toggle("blind", {"direction": "down"}, 1000); 
 
});

#toggle { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<p>Click anywhere to toggle the box.</p> 
 
<div id="toggle"></div>