Usando la función show de jQuery UI, no obteniendo el efecto deseado - jquery, jquery-ui

Me he estado rascando la cabeza en este para unmientras, pero me pregunto si alguien tiene una idea de cómo puedo recrear un efecto específico usando la función show de jQuery. Lo que me gustaría hacer es deslizar mi encabezado / barra de navegación en la página de arriba a abajo, con TODOS los elementos dentro de la etiqueta del encabezado moviéndose con la animación.

Hasta ahora, he "intentado $ (" encabezado "). SlideUp (1000), lo que da el efecto de que se está creando una cortina, pero los elementos dentro del encabezado son estáticos.

También probé $ ("encabezado").show ("drop", {direction: "up"}, 1000), pero esto da el efecto de una especie de fundido antes de que caiga. Me gustaría que se deslice hacia abajo desde la parte superior. El único ejemplo similar que he podido encontrar es similar al encabezado de http://www.sproutcore.com, pero creo que están usando CSS3 para este efecto.

¿Hay una forma sencilla de lograr esto con jQuery "s show ()?

¡Gracias por leer!

Respuestas

1 para la respuesta № 1

Sin ver su HTML / CSS es difícil saber si hay un problema allí, pero;

¿Ha intentado configurar su encabezado para mostrar: ninguno entonces.

$("#header").slideDown(1000);

No puedo imaginar que .slideUp () te daría el efecto que buscas.

También puede intentar establecer la altura de su encabezado en 0 y aplicar en la carga de la página:

$("#header").animate({
height : 100px
},{
queue : false,
duration : 1000
});

Pero eso podría mostrar algunos problemas funky con los encabezados de contenido interno.

Si está configurado para usar .show () + UI, la diapositiva debería funcionar.

$("#header").show({
effect : "slide",
easing : "easeOutQuart",
direction : "down",
duration : 1000
});

---

0 para la respuesta № 2

Mira este ejemplo que hice: http://jsfiddle.net/hFBc8/1/

HTML

<div class="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="sub-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>

Javascript

var h = $(".sub-menu").height();
$(".sub-menu").css("top", -h);

$(".menu").hover(
function(){
$(".sub-menu").animate({top: 0});
},
function(){
$(".sub-menu").animate({top: -h});
}
);

CSS

.menu li {
float: left;
padding: 10px 20px;
}
.menu {
background: #ffff33;
overflow: auto;
z-index: 10;
position:relative;
}
.sub-menu {
position: relative;
top: 0;
}

---

0 para la respuesta № 3

Mira si esto hace lo que quieres: http://jsfiddle.net/bryanjamesross/hHmpH/

El problema es ese slideDown y slideUp Animar la altura, no la posición. Entonces, lo que sucede es que la altura del contenedor se hace más pequeña / grande, mientras que el contenido no.

slideDown y slideUp realmente debería ser llamado expandVertical y contractVertical (o posiblemente squeeze)

---