toogle como usar abrindo pra direita

[Thiago Duarte 23]

Alguém sabe como fazer um toogle abrindo lentamente da esquerda pra direita?

 

seria parecido com esse exemplo http://jsfiddle.net/hcmLw/2/light/

[Sergio Tomas 16]

Boa noite Thiago, você pode fazer isso usando CSS.

 

Exemplo:

#caixa{width: 200px; height: 200px; position: absolute; left: -200px; top: 0px; -webkit-transition: left 0.5s linear;}
#caixa.aberto{left: 0px;}

No Javascript você irá animar o elemento com base nessa classe, removendo e adicionando

[Giihh 6]

Alguém sabe como fazer um toogle abrindo lentamente da esquerda pra direita?

 

seria parecido com esse exemplo http://jsfiddle.net/hcmLw/2/light/

 

 

seguindo o exemplo que vc mandou

$(".myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('.mySelect').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 2000;

    $('#myDiv').toggle(effect, options, duration);
});

Quando o toggle seria ativado? ao carregar a página?

 

para ficar mais lento alterei a variavel duration para 2000

[Marcos_imasters 288]

ja tenteu usa um fade slow?

[Thiago Duarte 23]

ja tenteu usa um fade slow?

Não, eu só usei toggle, não pode usar pra esse efeito ?

[Marcos_imasters 288]

tenta assim

 

HTML

<div class="box"></div>

<input type="button" value="click" class="myButton">

JS

var effect = true;

$(".myButton").click(function () {

$('.box').stop(true, true).animate({ width: effect?'273':'1' }, 'slow', 'easeInOutQuart');

effect=!effect;

});

CSS

.box {position: absolute; height: 100px; width: 1px; background: red;}

.myButton {position: absolute; top: 200px;}

[Thiago Duarte 23]

 

Oi, seu exemplo não funcionou, olha ai: http://jsfiddle.net/h8zvuLr3/

[Marcos_imasters 288]

Thiago Duarte

 

você não ativou a lib do jquery.

 

selecione

do lado esquerdo ali <<<

 

Frameworks & Extensions

Jquery apatir do 1.7.2

e marque Jquery UI apatir do 1.8.18

 

Funcionando

http://jsfiddle.net/aurasistemas/h8zvuLr3/1/