1

Galera estou tendo uma dúvida, uso efeitos em jQuery assim:

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

Dei uma olha na documentação mas não estou achando a forma correta de fazer isso, preciso de um evento onde começa da direita para esquerda. E com 'toggle' eu tenho esse efeito, porém a div começa do topo paras baixo também.

Bom quero aplicar esse efeito: Menu

No menu que estou montando: Menu que estou montando

3 Respostas 3

3

Seria isso que você quer:

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

Exemplo no JSfiddle

8
  • Bom não exatamente. Tentei dessa forma que vc falou, e não teve efeito nenhum, apenas criou uma margem de 200px. coloquei o link da menu que estou montando, poderia colocar seu código la, acho que estou fazendo algo errado. jsfiddle.net/q35xsopx/2 17/12/2016 às 10:54
  • Na hora de Exibir, quando passa o mouse em cima, fica acionando varias vezes o mesmo efeito 17/12/2016 às 11:23
  • É porque estava como .mouseover. Agora mudei pra mouseenter e mouseleave.
    – Raizant
    17/12/2016 às 11:40
  • 1
    o efeito e isso mesmo, poderia me ajudar a colocar ele nesse menu que estou montando? jsfiddle.net/q35xsopx/2 Estou tentando colocar ele aqui mas não funciona 17/12/2016 às 18:36
  • 1
    @JacksonAntunes e ai deu uma olhada no menu? 19/12/2016 às 10:04
1

Se tiver a possibilidade de usar bootstrap, faça dessa meneira.

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

3
  • Oi, então eu não uso o bootstrap, e o efeito que eu quero e da direita para esquerda. 16/12/2016 às 22:26
  • Pronto, editei o código. 17/12/2016 às 0:28
  • Ainda não é o efeito que eu queria, ele tem que ir da direita para esquerda, editei a pergunta com o link do que eu quero fazer, e o que estou tentando fazer. 17/12/2016 às 9:50
1

Resolvi o problema assim:

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

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 .