Comment créer la boîte d'entrée coulissante de Digg?

Question

Comment réalisent-ils cette belle boîte d'entrée coulissante? Tout ce que je remarque c'est que leur marge de forme change lorsque vous collez quelque chose. Utilisent-ils un plugin pour jQuery?

Une idée?

Answer 1

Mmmhmmm ... c'est amusant. L'effet que vous voyez n'est pas seulement le résultat d'une animation intelligente, mais aussi d'un CSS intéressant. J'ai répliqué cela en utilisant un peu de base jQuery, ainsi qu'un peu de CSS.

Le jQuery est exceptionnellement simple - en utilisant simplement la fonction de base animate().

var input = $('#new_link'); 
var nav = $('#top_bar ul'); 
var placeholder = input.val(); 
var originalWidth = input.width(); 
var newWidth = 450; 

input.focus(function() { 
    input.animate({ 
     width: newWidth 
    }, 100).addClass('active').val(''); 

    nav.fadeTo(100, 0.3); 
}); 

input.blur(function() { 
    $(this).animate({ 
     width: originalWidth 
    }, 100).removeClass('active').val(placeholder); 

    nav.fadeTo(100, 1); 
}); 

C'est le CSS qui fait le plus de magie. Voir la démo pour plus.

Jetez un coup d'oeil ici: http://www.jsfiddle.net/xFd5b/2/