Seja bem vindo(a) à mais uma aula do curso de jQuery para iniciantes. Iniciamos hoje a parte mais bacana do nosso curso, que é onde iremos trabalhar com efeitos.
Falaremos nesta aula sobre os efeitos show, hide, toggle, slideup, slidedown, slidetoggle e veremos como aplicar um tempo de duração para a transição de cada efeito tornado o mesmo mais atraente.
Acompanhe a aula com atenção e não esqueça de deixar um comentário depois, bom estudo.
Este post faz parte de uma série, confira tudo que já foi publicado sobre o mesmo assunto.
Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.
Atualmente temos 19 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
Boa tarde, quando tento abrir o jquery no meu site php todo o conteúdo some, e quando crio um documento novo em html funciona tudo direitinho. porque isso acontece?
ResponderRicardo,
ótimas aulas, assim que conseguir uma renda melhor irei me escrever no seu blog, porém tenho uma dúvida...
(a função .click()) por ser .click() ela obrigatoriamente tem que estar dentro da função .ready() ?
ou simplesmente posso chama-la livre de qualquer função "externa"?
Agradeço pelos ensinamentos,
Lucas Moraes.
O evento click pode ser usado livremente, consulte documentação do jQuery para mais detalhes.
ResponderÓtima aula, Ricardo.
Mas, tentando incrementar, gostaria de exibir no carregamento da página uma div com mensagem, tipo a que você ensinou em css com os ícones de sucesso, erro, alerta e pergunta.
Após um cadastro, de acordo com o retorno do
$clClientes->inserir($clClientes)
exibir o div correspondente.
A questão é exibir, manter exibido, depois esconder. To tentando desta forma mas não consigo:
$(document).ready(function(){
$(".panel").slideDown(2000);
$(".panel").show(2000);
$(".panel").slideUp(2000);
});
A div panel faz o slideDown e logo em seguida faz o slideUp. Não permanece 2 segundos visível, estática.
Alguma sugestão?
Já tentou fazer um delay nele pra deixar ele "dormindo" alguns segundos e depois escondê-lo novamente:
$(document).ready(function(){
$(".panel").slideDown(500).delay(2000).slideUp(500);
});
BINGO!
Exatamente isso! Estou aprendendo muito.
Muito obrigado.
Vamos supor que o painel 1 esta aperto, quando clico no painel 2 tambem abre e fica os dois abertos. Tem como programar para quando clicar no painel 2, o painel 1 fechasse, outro outro painel qualquer?
ResponderÉ só programar as devidas ações. O funcionamento é o mesmo para qualquer elemento, basta pensar de maneira lógica, assim como você oculta ou mostra um elemento quando um botão é clicado, você pode fazer as mesmas ações quando qualquer outro elemento for clicado.
ResponderÓtima aula, deu tudo certinho. Agora é seguir em frente para a aula 4 de iniciantes de jQuery.
Abraços e obrigado Ricardo!
Obrigado e desculpe o encomodo, acho que tinha feito algo errado, pois agora funcionou. Antes mesmo eu mudando as ids não dava.
ResponderBoa tarde Ricardo, primeiramente, quero parabenizá-lo mais uma vez pelo seu blog e vídeo aulas, são muito interessantes e construtivas, aprendo muito!
Sobre a aula 3 letra "d", gostaria de saber como faria para colocar vários painéis? O que tenho que mudar para funcionar vários painéis na mesma pagina?
ResponderÉ só programar o evento para quantos painéis quiser, o funcionamento é o mesmo.
ResponderMas tenho que mudar o que? O Id na DIv ou na programação do codigo?
ResponderPois criei um outro e quanto clico no primeiro ele abre o primeiro e o segundo
ResponderPensa comigo Samuel, se você quiser que cada um tenha um comportamento individual você precisa de um ID para cada elemento, se você quiser que todos tenham a mesma ação você pode usar uma classe igual para todos... coloque no papel o que você quer fazer e raciocine de maneira lógica. Procure forma de resolver o problema e faça testes, muitos testes.
Muito bom parabéns pelas aulas!!
quando vai sair novas aulas?
ResponderOlá, Ricardo.
Parabéns pelos posts!
comecei vendo essas videoaulas sobre jQuery, e já vou fazer meu cadastro no site.
É difícil distribuir conhecimento de desenvolvimento, pois a maioria dos sites dão a impressão de serem feitos por quem "aprendeu sozinho".
Não que seja ruim, mas algumas aulas acabam sendo mal planejadas, e o conteúdo, mesmo bom, acaba sendo prejudicado.
Não sei se esse é o seu caso, mas acredito que não, porque tanto a explicação quanto a organização são muito boas.
Eu estou começando a trabalhar com Web, e este é um dos melhores sites de conteúdo para Internet que eu já frequentei.
De novo, parabéns.
Att,
Hugo.
Muito obrigado Hugo, seja bem vindo ao blog.
Responder© 2008-2023 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host
É proibida a reprodução total ou parcial de qualquer conteúdo deste site.
Maravilha essas vídeos aulas de jQuery. Cheguei a comprar um livro para aprender jQuery mas o melhor mesmo é ver eouvir alguém explicando. Eu só acho que o tamanho da fonte do editor de texto poderia ser maior. A letra esta muito pequena. Valeu tudo de bom.