Curso de jQuery para iniciantes - Aula 3

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

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.

Mais posts desta série

Este post faz parte de uma série, confira tudo que já foi publicado sobre o mesmo assunto.

Sobre o autor

Ricardo Bernardi

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.

Comentários

Atualmente temos 19 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Eliseu Pires comentou em

    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.

    Responder
  • André Reis comentou em

    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?

    Responder
  • Ricardo,
    ó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.

    Responder
  • thiagoluna comentou em

    Ó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?

    Responder
    • 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);
      });
      Responder
  • Samuel comentou em

    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
  • Henrique comentou em

    Ótima aula, deu tudo certinho. Agora é seguir em frente para a aula 4 de iniciantes de jQuery.
    Abraços e obrigado Ricardo!

    Responder
  • Samuel comentou em

    Obrigado e desculpe o encomodo, acho que tinha feito algo errado, pois agora funcionou. Antes mesmo eu mudando as ids não dava.

    Responder
  • Samuel comentou em

    Boa 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
          • Pensa 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.

  • Hugo comentou em

    Olá, 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.

    Responder

Deixe seu comentário