Toggle () effect down, JQuery

1

Can you change the direction of the toggle () effect of JQuery? For example, I made a button that when clicking, it shows and closes a div

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

Only, that he kind of has an automatic animation. Left to right > > > I wanted the effect to start from the top down, in case, start showing the top of the div and finish showing everything when it came down. Can you do this with toggle ()? Or is there something you can do?

    
asked by anonymous 20.04.2017 / 13:24

2 answers

1

I believe you are looking for .slideToggle() instead of .toggle() , the default behavior of .slideToggle() in jquery is "slideUp" or "slideDown", ie, slide up and down. If you want the div to go left or right, you can use the jQuery effect available in jquery.

Jquery Slide

Here is an example of .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><buttonid='slide-down'>SlideDown</button><buttonid='slide-up'>SlideUp</button><buttonid='toggle-sliding'>ToggleSliding</button><imgheight="200" width="200" src='http://2.bp.blogspot.com/-ZlimLS8Z-_A/U3moCpwsWII/AAAAAAAAfkg/RGdEzSBHtSU/s1600/03.png' alt='hopper'>
    
20.04.2017 / 13:33
1

I think that the toggle, by itself, can not change the direction from the bottom up and vice versa. You can use: .slideToggle () or slideDown () / slideUp ()

(=

    
20.04.2017 / 13:33