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/

如何创建Digg的滑动输入框？

1 个答案: