Qual é a melhor maneira de deslizar duas divs uma para a outra. Basicamente, divido minha página inicial em duas seções. Quero que elas deslizem para baixo e deslizem uma para a outra, mas acontecem apenas uma vez para cada visualizador.
<div id="wrap">
<div id="slideDown">Slide down</div>
<div id="slideUp">Slide up</div>
</div>
Respostas:
1 para resposta № 1Você precisará usar os efeitos de animação do jQuery slideUp
e slideDown
(veja a resposta do tandu) ou apenas use animate
se você estiver se sentindo mais detalhado.
Mas, para impedir que o navegador execute essa animação em uma visita de retorno, você precisará armazenar um cookie. plugin jquery-cookie é um bom lugar para começar. Basicamente, o que você vai querer fazer é:
- Verifique a presença do cookie doNotLoadAnimation.
- Se não estiver presente, defina o cookie doNotLoadAnimation e mostre a animação; caso contrário, mostre a página sem a animação
Não será perfeito porque os cookies não são uma forma de armazenamento persistente, por ex. se um usuário limpar seus cookies, a animação será executada novamente.
Espero que ajude!
1 para resposta № 2
jQuery "s .slideUp
e .slideDown
ocultar e mostrar conteúdo deslizando, respectivamente. Para ter .slideUp
realmente mostrar o conteúdo, é necessário usar o efeito de exibição da interface do usuário do jQuery para o slide, como em:
$("#slideUp").show( "slide", {direction: "up"} );
É difícil dizer exatamente o que você quer, e se você colar o que eu tenho lá (supondo que você tenha a interface do usuário de efeitos), ele será acionado apenas uma vez para cada visualização.