Effects with jquery

Asked

Viewed 80 times

1

Guys I’m having a doubt, use effects in jQuery like this:

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

I took a look at the documentation but I’m not finding the right way to do it, I need an event where it starts right-to-left. And with toggle I have this effect, but the div starts from the top down as well.

Well I want to apply that effect: Menu

On the menu I’m mounting: Menu I’m putting together

jquery

3 answers

3

That’s what you want:

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

Example in Jsfiddle

  • Good not exactly. I tried that way that you said, and it had no effect, just created a margin of 200px. I put the link from the menu I’m mounting, I could put your code there, I think I’m doing something wrong. https://jsfiddle.net/q35xsopx/2/

  • When it comes to Show, when you hover your mouse over it, it triggers the same effect several times

  • It’s because I was like .mouseover. Now I switched to mouseenter and mouseleave.

  • 1

    Could you help me put him on this menu that I’m putting together? https://jsfiddle.net/q35xsopx/2/ I’m trying to put it here but it doesn’t work

  • As soon as I get home I’ll figure it out...

  • @Jacksonantunes ok I’m waiting, thank you

  • 1

    @Jacksonantunes and then took a look at the menu?

  • Sorry Hugo, I just arrived today. But I’m glad you made it!

Show 3 more comments

1


I solved the problem like this:

$("#mySidenav").animate({width: 'toggle'});

1

If you have the possibility to use bootstrap, make that minstrel.

$( ".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>

<div class="toggle-effect">Clique Aqui</div>
<div class="demo-toggle">
  <p>Oi, eu sou seu toggle bem mais simples.</p>
</div>

  • Hi, so I don’t use the bootstrap, and the effect I want is right to left.

  • Okay, I’ve edited the code.

  • Still not the effect I wanted, it has to go from right to left, I edited the question with the link of what I want to do, and what I’m trying to do.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.