Effects with jquery

1

I'm having a question, I use jQuery effects like this:

$("#elemento").toggle(2000);

I gave a look in the documentation but I'm not figuring out the right way to do it, I need an event where it starts from right to left. And with 'toggle' I have this effect, however the div starts from top to bottom as well.

Well I want to apply this effect: Menu

In the menu I am mounting: Menu I'm Riding

    
asked by anonymous 16.12.2016 / 21:59

3 answers

1

I solved the problem like this:

$("#mySidenav").animate({width: 'toggle'});
    
19.12.2016 / 14:20
3

That's what you want:

$("#elemento").animate({left: "200px"}, 2000, function(){
        $(this).toggle();
        });

Example in JSfiddle

    
17.12.2016 / 11:44
1

If you have the possibility of using bootstrap, do this.

$( ".toggle-effect" ).click(function() {
  $( ".demo-toggle" ).toggle( "fast" );
});
* {
  padding: 0;
  margin: 0;
}

.toggle-effect {
  font-size: 16px;
  background-color: #3498db;
  float: left;
  padding: 20px;
  writing-mode: vertical-rl;
  white-space: nowrap;
  display: block;
  cursor: pointer;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.demo-toggle {
  display: none;
  padding: 10px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="toggle-effect">Clique Aqui</div>
<div class="demo-toggle">
  <p>Oi, eu sou seu toggle bem mais simples.</p>
</div>
    
16.12.2016 / 22:32