2

Tem como mudar a direção do efeito toggle() do JQuery? Por exemplo, fiz um botão que ao clicar, ele mostra e fecha uma div

    $('.botao').click(function(){
        $('.div').toggle(700);
    }); 

Só, que ele meio que tem uma animação automática. Da esquerda pra direita >>> Eu queria que o efeito começasse de cima pra baixo, no caso, começar a mostrar a parte de cima da div e terminar de mostrar tudo quando embaixo aparecesse. Tem como fazer isso com o toggle()? Ou tem alguma coisa que faça?

2 Respostas 2

2

Acredito que você esteja procurando por .slideToggle() ao invés de .toggle(), o comportamento padrão do .slideToggle() no jquery é "slideUp" ou "slideDown", ou seja, deslizar p/ cima e p/ baixo. Se quiser que a div vá p/ direita ou esquerda, tu pode utilizar o efeito "slide" disponível no jquery.

Jquery Slide

Segue um exemplo do .slideToggle()

$('#slide-down').click(function() {
  $('img').slideDown('fast');
});

$('#slide-up').click(function() {
  $('img').slideUp(200);
});

$('#toggle-sliding').click(function() {
  $('img').slideToggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='slide-down'>Slide Down</button>
<button id='slide-up'>Slide Up</button>
<button id='toggle-sliding'>Toggle Sliding</button>
<img height="200" width="200" src='http://2.bp.blogspot.com/-ZlimLS8Z-_A/U3moCpwsWII/AAAAAAAAfkg/RGdEzSBHtSU/s1600/03.png' alt='hopper'>

2
  • 1
    É isso mesmo Mathias, descuido da minha parte de esquecer isso, muito obrigado! Commented 20/04/2017 às 11:39
  • @LucasCarvalho coloquei um exemplo bem mais completo na resposta, às ordens =) .
    – Mathiasfc
    Commented 20/04/2017 às 11:43
1

Creio que o toggle, por si só, não tenha como mudar a direção de baixo pra cima e vice-versa. Você pode usar: .slideToggle() ou slideDown()/slideUp()

(=

1
  • Que descuido meu rs, o .slideToggle() é o que preciso mesmo, muito obrigado, Aline! Commented 20/04/2017 às 11:38

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 .