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 Resposta
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;
}
-
$('#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
transitions
no CSS ebackground-position
.