javascript - 如何制作Digg的滑动输入框？

Question

他们如何实现漂亮的滑动输入框？我只注意到，当您粘贴内容时，它们的表格边距会发生变化。

他们使用任何 jQuery 插件吗？

有什么想法吗？

Answer 1

嗯嗯嗯...这很有趣。您看到的效果不仅仅是一些巧妙的动画效果，还有一些有趣的 CSS。我已经使用一些非常基本的 jQuery 和一些 CSS 复制了它。

jQuery 非常简单 - 只需使用基本的 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);
});

最神奇的是 CSS。有关更多信息，请参见演示。

在这里查看:http://www.jsfiddle.net/xFd5b/2/