Usando a função show do jQuery UI, não obtendo o efeito desejado - jquery, jquery-ui

Eu estive coçando minha cabeça nessa por umenquanto isso, mas estou me perguntando se alguém tem uma idéia de como posso recriar um efeito específico usando a função show do jQuery. O que eu gostaria de fazer é deslizar minha barra de cabeçalho / navegação para a página de cima para baixo, com TODOS os elementos na tag de cabeçalho se movendo com a animação.

Até agora, eu tentei $ ("header"). SlideUp (1000), que fornece o efeito de uma cortina sendo desenhada, mas os elementos no cabeçalho são estáticos.

Eu também tentei $ ("header").show ("drop", {direction: "up"}, 1000), mas isso dá o efeito de uma espécie de desvanecimento antes que ele desça. Gostaria que deslizasse de cima para baixo. O único exemplo semelhante que eu consegui encontrar é semelhante ao cabeçalho em http://www.sproutcore.com, mas acredito que eles estejam usando CSS3 para esse efeito.

Existe uma maneira simples de fazer isso com o show do jQuery ()?

Obrigado pela leitura!

Respostas:

1 para resposta № 1

Sem ver seu HTML / CSS, é difícil dizer se há algum problema, mas;

Você já tentou configurar o cabeçalho para exibir: nenhum então.

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

Eu não consigo imaginar .slideUp () daria a você o efeito que você procura.

Além disso, você pode tentar definir a altura do cabeçalho como 0 e aplicar no carregamento da página:

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

Mas isso pode mostrar alguns problemas interessantes com o conteúdo interno dos cabeçalhos.

Se você optar por usar .show () + interface do usuário, o slide deverá funcionar.

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

---

0 para resposta № 2

Veja este exemplo que eu fiz: 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 resposta № 3

Veja se isso faz o que você deseja: http://jsfiddle.net/bryanjamesross/hHmpH/

O problema é que slideDown e slideUp animar a altura, não a posição. Então o que acontece é que a altura do contêiner fica menor / maior, enquanto o conteúdo não.

slideDown e slideUp realmente deveria ser chamado expandVertical e contractVertical (ou possivelmente squeeze).

---