jQuery: painéis deslizantes um após o outro
Pergunta
Eu sei que isso é simples para alguns de vocês, então por favor me ajude! Eu tenho 3 painéis (divs) que quero deslizar um após o outro de clicar em um botão. Deslizar um painel é fácil, mas como deslizar várias divs em ordem? Obrigado.
Solução
Mesmo que eu realmente goste Solução de Kane, você pode achar pouco difícil entender se não conhece 'funções anônimas' e argumentos.
A seguir também funciona:
$('#slideDiv').click(
function(e)
{
e.preventDefault();
var i = -1;
var divList = $(".slide");
var animationCallback = function()
{
if(++i < divList.length)
$(divList[i]).slideUp('slow', animationCallback);
//Replace 'slideUp' with any other animation of your choice. Make sure to pass 'animationCallback' as the last parameter.
//e.g. you can do
//$(divList[i]).animate({ left : '300px'}, 100, 'linear', animationCallback);
};
animationCallback();
}
);
EDITAR:
Página de demonstração atualizada. Adicionado comentário sobre como usar animação diferente.
Outras dicas
Dê ao 3 Div uma classe ".slide_panel", isso vai atravessar eles e executar a animação neles.
$("#button").click(function()
{
var i = -1;
var arr = $(".slide_panel");
(function(){
if(arr[++i])
$(arr[i]).animate({ left: "300px" }, 100, "linear", arguments.callee)
})();
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow