2

Neste link, eu tenho umas tarjas vermelhas em especialidade. Gostaria de perguntar qual efeito eu vou usar para que uma div substitua o conteúdo das tarjas individualmente com um efeito tipo slideToggle da esquerda para a direita. Como começar este script em jQuery?

1
  • Não entendi muito bem a pergunta. Mas, você pode usar transitions no CSS e background-position. Commented 19/08/2014 às 11:55

1 Resposta 1

3

Comece com alguma coisa tipo isso:

jquery:

$('.disparador').click(function () {
    $(this).animate({
        width: ($(this).width() == 200 ? 100 : 200)
    });
    $(this).siblings('.painel').animate({
        width: 'toggle'
    });
});

HTML:

<div class='container'>
    <div class='painel'>Lorem ipsum dolor sit amet.</div>
    <div class='disparador'></div>
</div>

<div class='container'>
    <div class='painel'>Lorem ipsum dolor sit amet.</div>
    <div class='disparador'></div>
</div>

<div class='container'>
    <div class='painel'>Lorem ipsum dolor sit amet.</div>
    <div class='disparador'></div>
</div>

CSS:

.container {
    position: relative;
    width:200px;
    height: 350px;
    float: left;
}
.painel {
    display:none;
    width: 100px;
    height: 350px;
    overflow: auto;
    position:absolute;
    top: 0;
    left:0;
}
.disparador {
    width: 200px;
    min-width: 50%;
    height: 350px;
    position:absolute;
    top: 0;
    right:0;
    background-color: red;
}

JSFiddle

7
  • $('#widget_sp_image-2, #widget_sp_image-3, #widget_sp_image-4').click(function (e) { ... tenho 3 ids diferentes ... como aplicaria o painel $('.painel').animate({width: "toggle"}, 750); para a sua id especifica? Commented 19/08/2014 às 12:41
  • Essa é a magia do jquery, crie um mecanismo para apontar ao elemento desejado, usando data- ou outro parâmetro qualquer... Commented 19/08/2014 às 12:48
  • @marcosvinicius Editei a resposta, agora esta referenciando ao elemento clicado e seu painel. veja funcionando no jsfiddle... Commented 19/08/2014 às 13:16
  • talvez seja necessário concatenar uma string "px" por causa da unidade de medida, as vezes funciona sem, mas seria uma boa prática colocar Commented 19/08/2014 às 14:15
  • 1
    @marcosvinicius Para fazer e desfazer, prefira usar o toggle quando disponível, ele sempre inverte a ação automaticamente, ou seja se esta oculto ele mostra, se esta visível ele oculta. Quando o que você quer fazer não disponibiliza uma opção toggle, é preciso verificar a situação atual e aplicar o inverso, como no meu ex. Quero alternar a largura do disparador entre 200 e 100, veja que coloquei um if largura == 200 retorna 100 se não retorna 200 Commented 19/08/2014 às 18:27

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 .