4

Eu estou a desenvolver um projecto e precisava de saber como dar slide numa div para a esquerda. De momento estou a usar:

$('#idDiv').toggle('slide', { direction: 'left', distance: 450 });

Eu queria que a minha div de 500px de width deslizasse e deixasse 50px à mostra. O problema é que quando ela acaba de dar o slide de 450px ela desaparece. Eu sei que o toggle tem a ver com o hide e show, mas será que existe outra maneira (sem usar o animate para dar resize) de dar slide para a esquerda sem que esta desapareça?

Está aqui um exemplo do que disse.

3 Respostas 3

3

O método .toggle() faz a div aparecer/desaparecer, é melhor usar o método .animate() e animar a margin-left por exemplo. A largura (width) poderia também ser uma alternativa.

Assim para poder fechar e voltar a abrir podes usar uma flag. Uma flag é uma variável útil para saber o estado do elemento.

Neste caso uso-o para guardar informação sobre se está aberto ou fechado. Esta flag no primeiro exemplo é uma variável global, no segundo exemplo está guardada dentro de um campo data do próprio elemento.

Assim a cada clique ele vai verificar com um operador ternário se a flag open tem o valor true ou false e consoante isso retornar "-250px" (caso open for true) ou "0px" (caso open for false):

var open = true;
$(document).click(function () {
  $("#toggle").animate({
    'margin-left': open ? "-250px" : "0px"
  }, 500);
  open = !open;  // mudar a flag para o oposto do que estava usando o operador de negação "!"
});

Exemplo


Outra alternative é ter um campo data no elemento que guarda esta flag sobre estar aberto ou não:

HTML

<div id="toggle" data-open="true"></div>

JS

$(document).click(function () {
  var elemento = $("#toggle");
  elemento.animate({
    'margin-left': elemento.data('open') ? "-250px" : "0px"
  }, 500);

  // mudar a flag para o oposto do que estava usando o operador de negação "!"
  elemento.data('open', !elemento.data('open')); 
});

Exemplo


O terceiro exemplo (e talvez melhor) é usando uma classe e transições CSS:

CSS

    #toggle {
        width: 300px;
        height:300px;
        background: #ccc;
        -webkit-transition: margin-left 500ms ease;
        -moz-transition: margin-left 500ms ease;
        -ms-transition: margin-left 500ms ease;
        -o-transition: margin-left 500ms ease;
        transition: margin-left 500ms ease;
    }
    .toggle {
        margin-left: -250px
    }

JS

    $(document).click(function() {
        var $toggle = $("#toggle");
        if ($toggle.hasClass('toggle')) $toggle.removeClass('toggle');
        else $toggle.addClass('toggle');
    });

Exemplo

7
  • Obrigado, acho vou utilizar esta dica e vou usar um if para voltar a dar a margin inicial
    – Joao
    Commented 26/02/2014 às 11:58
  • @blackblather, juntei exemplo para voltar a abrir também
    – Sergio
    Commented 26/02/2014 às 12:02
  • O unico problema é que eu nao precebo muito dessa maneira que usaste para solucionar o problema e como eu tenho que defender o meu projecto, posso ter o azar de me perguntarem sobre isso e depois nao sei explicar como deve de ser, da outra maneira estou mais à vontade caso perguntem algo. Mas de qualquer maneira obrigado :)
    – Joao
    Commented 26/02/2014 às 12:11
  • @blackblather, juntei explicação e mais um exemplo / variante
    – Sergio
    Commented 26/02/2014 às 12:18
  • 2
    @blackblather, acrescentei mais uma variante :P
    – Sergio
    Commented 26/02/2014 às 12:38
1

Eu nao estou muito dentro de jQuery e preciso de explicar o codigo quando for fazer a apresentação do meu projecto (PAP) e a maneira que arranjei de solucionar o problema foi:

$(" #sideBarE ").click(function(e)
        {
            var divE = $('#empresas');
            var marginE = divE.css('margin-left');
            //alert(marginE);
            if (marginE == "0px")
                $('#empresas').animate({'margin-left':"-400px"}, 1000);
            else
                $('#empresas').animate({'margin-left':"0px"}, 1000);
            e.stopPropagation();
        });
2
  • Ao utilizares o método .stopPropagation() estás a impedir a propagação e consequente aviso do que acabou de acontecer no elemento com o identificador sideBarE para os seus elementos pais. Digo isto porque não sei se realmente precisas desse método ai. (uma vez que referes que vais ter que explicar o código, avalia a necessidade do uso deste método) ;)
    – Zuul
    Commented 26/02/2014 às 12:39
  • Eu sei, era esse o objectivo visto que eu tenho mais 2 divs, cada uma delas com efeitos diferentes, se eu tirar esse método, isto fica uma salganhada ahahah
    – Joao
    Commented 26/02/2014 às 12:42
0

Tu sabe que da pra fazer isso com o translate nas transitions e animations do css ??

1
  • Eu sei mas eu preciso de utilizar "tecnologias" que não aprendi na escola, por isso optei pelo jquery e pelo bootstrap
    – Joao
    Commented 26/02/2014 às 14:19

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 .