5

Tenho uma pagina onde o usuário opta por fazer login (caso já tiver cadastro) ou faz o cadastro, caso ele optar pelo cadastro ao clicar no botão cadastre-se gostaria que o elemento saísse para esquerda e a primeira etapa do cadastro viesse pela direita igual a um sistema de slide.

No meu html da Home eu tenho as etapas chamo cada uma através de um include e deixo uma baixo da outra seguindo a hierarquia, não sei se para o que eu quero essa é a melhor opção.

Tipo eu poderia usar display:none e aplicando display:block no próximo elemento. Mas gostaria de fazer o efeito slide alguém pode me dar uma luz e exemplos.


Segue um exemplo de um jeito simples que eu poderia fazer mas que quero substituir pelo efeito slide:

Exemplo jsfiddle

VLw

4
  • Amigo, faz um exemplo no jsFiddler para gente te ajudar. Você quer que cada passo a div desse passo tenha um efeito slide a direita, é isso?
    – RBoschini
    14/12/2015 às 12:36
  • jsfiddle.net/1r3vwf30/embedded/result fiz um exemplo simples do jeito que eu poderia fazer, mas gostaria de em vez de simplesmente sumir ele deslizasse para a esquerda e desse lugar para etapa2 que vai deslizar da direita. @RBoschini tentei algumas coisas como como .hide() e .show() mas n deu muito certo e nem o .animate({width: '0'} ) ...
    – user27585
    14/12/2015 às 13:02
  • @Erick, dá uma olhada em animate do jquery: api.jquery.com/animate 14/12/2015 às 13:09
  • Deixei um exemplo no fiddler para vc.
    – RBoschini
    14/12/2015 às 13:20

2 Respostas 2

1

Amigo, fiz um exemplo para você. Veja se ajuda

http://jsfiddle.net/qo7557p5/

Criei o html com os passos.

<div id="wizardSignin" data-step="1" active>
 <h1> Step 1 </h1>
 <input type="text">
</div>

<div id="wizardSignin" data-step="2">
 <h1> Step 2 </h1>
 <input type="checkbox">
</div>

<div id="wizardSignin" data-step="3">
 <h1> Step 3 </h1>
 <select>
   <option>Option 1</option>
 </select>
</div>

 <input type="button" id="nextButton" value="next">

No Js, controlo exibição e aplico efeito de slide como você especificou.

$(document).ready(function(){
    $('div[data-step]').hide();
  $('div[data-step=1]').show();

  $('#nextButton').on('click',function(){
        var idx  = $('#wizardSignin[active]').attr('data-step');
        $('#wizardSignin[active]').removeAttr('active').hide();

      if(idx<3){
        idx++;
      }else{
        idx=1;
      }

      $('#wizardSignin[data-step="'+idx+'"]').attr('active','');
      $('#wizardSignin[data-step="'+idx+'"]').effect('slide');


  });

});

Veja se isso ajuda.

5
  • Olha é bem isso, to tentando aplicar a minha necessidade aqui n estou conseguindo ao clicar no botão ele some com o primeiro elemento mas n mostra o segundo mas talvez eu esteja errando algo aqui o seu exemplo foi bacana muito obrigado.
    – user27585
    14/12/2015 às 14:54
  • Lembre-se que esse exemplo usa data-tag, nao esqueca de por o data-step nas suas divs.
    – RBoschini
    14/12/2015 às 14:59
  • Edita seu fiddler e posta aqui que eu ajudo vc, mas adapta antes aquele que vc ja enviou, assim podemos codar juntos.
    – RBoschini
    14/12/2015 às 15:00
  • Descobri o que eu tinha errado e agora funcionou, so vou precisar saber se vai me atender ja que o sisteminha e mais robusto do que citei... Mas enfim me foi util e funcionou muito obrigado.
    – user27585
    14/12/2015 às 15:00
  • é possível fazer o primeiro elemento deslizar para esquerda e o proximo vir da direita?
    – user27585
    14/12/2015 às 15:13
1

Podes usar CSS para fazer isso. Usando CSS transition e margem negativa escondes o elemento. Depois adicionas uma classe que repõe a margem a zero, com JavaScript.

CSS

#slideleft {
  width: 200px;
  height: 200px;
  transition: margin-left .5s;
  margin-left: -200px;
  background: #ccf;
}

.abrir {
  margin-left: 0px !important;
}

JavaScript:

button.addEventListener('click', function() {
  slide.classList.toggle('abrir');
});

jsFiddle: http://jsfiddle.net/20b36dnv/

2
  • Tentei inverter deixando a caixa já aberta e ao clicar no botão ela deslizar mas n deu certo, na vdd so invert o margin-left: no css, o que pode ser? Isso no seu exemplo no jsfiddle.
    – user27585
    14/12/2015 às 13:16
  • @Erick assim jsfiddle.net/20b36dnv/1?
    – Sergio
    14/12/2015 às 13:18

Você deve fazer log-in para responder a esta pergunta.