[Resolvido] Efeito de busca à là Apple.com

[Guilherme Oderdenge 42]

Olá!

 

Há tempos tinha dúvidas com relação ao "animate" do jQuery, e o usuário fischerfee fez um tópico que me inspirou à estudar um método para fazer um efeito de busca igual à este, da Apple.

 

Pois bem, fui atrás, aprendi a fazer e venho cá compartilhar.

 

Quero reforçar que não sei se é a melhor maneira de se fazer, mas é a mais rápida e simples que achei.

 

O javascript/jquery:

// "Inicia o jQuery"
$(document).ready(function(){

 // Ao clicar no input/textarea com a classe "suaclasse", executa o animate
 // que aumenta em 200 pixels a largura do campo. O 500 é a velocidade em milisegundos
 // com que a ação é executada
 $('.suaclasse').click(function(){
    $(this).animate({'width' : '200px'}, 500);
 });

 // A ação a seguir impede que o input/textarea feche
 // sem "desclicar" a classe em questão (no caso, .suaclasse)
 $('.suaclasse').click(function(e){
    e.stopPropagation();
 });

 // A ação a seguir faz com que se você clicar fora
 // do lugar onde a classe está encontrada
 // o seu input feche automaticamente.
 // Lembre-se de manipular o tempo de acordo com a sua necessidade - aqui pode ter problemas
 // com o animate!
 $(document).click(function(){
    $('.suaclasse').animate({'width' : '-200px'}, 500);
 });
});

 

O HTML para 'chamar' o jQuery:

  <input type="input" placeholder="Digite aqui" class="suaclasse" />

 

Espero que tenham gostado.

 

Um abraço!