Skip to main content
Commonmark migration
Fonte Link

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

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

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

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

replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Assim a cada clique ele vai verificar com um operador ternárioum 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):

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):

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):

added 773 characters in body
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294
 

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

 

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

Pequena retificação ortográfica, ajuste da formatação do código de exemplo para ficar sem barra de rolagem.
Fonte Link
Zuul
  • 35,8mil
  • 21
  • 99
  • 190
Carregando
added 418 characters in body
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294
Carregando
added 418 characters in body
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294
Carregando
added 322 characters in body
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294
Carregando
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294
Carregando