Question

How do they achieve that nice sliding input box? All I notice is that, their form margin is changing when you paste something.

Do they use any plugin for jQuery?

Any idea?

Answer 1

Mmmhmmm… this is fun. The effect you see is not just the result of some clever animation, but also some interesting CSS. I’ve replicated this using some very basic jQuery, as well as a bit of CSS.

The jQuery is exceptionally simple – just utilizing the basic animate() function.

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);
});

It’s the CSS that does most of the magic. See the demo for more.

Have a look at it here: http://www.jsfiddle.net/xFd5b/2/