2

Estou a tentar fazer uma animação que comporte como um toggle. O que eu quero é que com o click event no #admin > p, este se desvie para a esquerda enquanto o #admin > form, #btn slideUp e volte para a posição original (css) quando #admin > form, #btn faz slide down outra vez.

Aqui está o meu cóodigo:

$('#admin > p').click(function(){
    $('#admin > form, #btn').stop(true).slideToggle();
})

$('#admin > p').toggle(function() {
    $(this).animate({'left':'20px'});
}, function() {
    $(this).animate({'right':'20px'});
});
3
  • Miguel, pode adicionar o seu HTML para ficar mais claro? (ou mesmo fazser um jsFIddle)
    – Sergio
    Commented 26/02/2014 às 19:29
  • Você quer que se um aparecer o outro desapareça, e vice-versa? Commented 26/02/2014 às 19:30
  • Aqui está o jsFiddle. Nota: não sei o que está a acontecer mas no meu browser funciona. O '#admin > p' vai para a esquerda mas o que que eu queria é que voltas-se dps para a posição original qd o 'form' fica-se hidden. Obgado pus este codigo porque ao menos funciona uma vez, tenho a certeza que percebem o que quero dizer. Obgado jsfiddle.net/dW6Mb
    – Miguel
    Commented 26/02/2014 às 19:33

2 Respostas 2

1

Aqui fica uma sugestão:

$(document).ready(function () {
    var aberto = $('#btn').is(':visible');  // verificar se #btn está visivel guardando o estado como true / false
    $('#admin > p').click(function () {
        $(this).animate({
            'right': aberto ? '20px' : '150px', // no caso de aberto se true usar '20px', no caso de aberto ser false usar '150px'
        });
        aberto = !aberto;
        $('#admin > form, #btn').stop(true).slideToggle();
    })
})

Exemplo

Não sei bem porque faz toggle da form '#admin > form e também do elemento #btn que está dentro da form e por isso incluído no slideToggle(). Se ele não fôr preciso pode também usar assim:

$(document).ready(function () {
    $('#admin > p').click(function () {
        var $adminForm = $('#admin > form');  // isto até poderia estar fora da função click caso seja usado noutras partes do código
        $(this).animate({
            'right': $adminForm.is(':visible') ? '20px' : '150px',
        });
        $adminForm.stop(true).slideToggle();
    })
})

Exemplo

3
  • Miguel, recomento também dar uma olhada à minha resposta aqui: pt.stackoverflow.com/questions/7388/…
    – Sergio
    Commented 26/02/2014 às 20:09
  • Obgado sergio. Quanto ao #btn estar no form e por isso ter de sofrer o slide com o form estou de acordo e foi isso que fiz no inicio mas não estava a aparecer no slide show, e tive de o por com um id e display:none no css só assim é que resultou, não percebo também. Obgado
    – Miguel
    Commented 26/02/2014 às 20:50
  • @Miguel fico contente de a minha resposta ter ajudado. Já agora, o display: none; no botão não é necessário, podes tirar: jsfiddle.net/vU53x/3
    – Sergio
    Commented 26/02/2014 às 20:53
0

Você pode fazer isso usando classes para verificar o estado do form. Fiz algumas alterações no fiddle que vc enviou.

http://jsfiddle.net/dW6Mb/6/

2
  • Obgado Moykn, mas não sei porquê o teu codigo estava ok no jsfiddle mas não consegui implementar no meu
    – Miguel
    Commented 26/02/2014 às 20:48
  • Se você apenas copiou o código(javascript) e jogou na sua página realmente não vai funcionar, fiz algumas alterações no html tbm.
    – Moykn
    Commented 27/02/2014 às 12:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .