淡化输入文本jquery

Question

我正在尝试在我的网站上创建一个优雅的重置功能，这样当用户按下重置按钮时，输入框会淡出用户输入的文本，然后淡入占位符文本，准备好重新输入文本进入。

$.each($('input.search-box'), function () {

    var $input = $(this);

    // fade out text - this currently fades the whole element.. which I don't want
    $input.animate({ opacity: 0 }, 1000, function () {

        // reset to default value
        $input.val("");

        // fade text back in
        $input.animate({ opacity: 1 }, 1000)   
    });

});

上面显示了我想要实现的目标..但是这会使整个输入淡出然后进入。有人可以告诉我如何仅在文本上实现这种效果吗？

非常感谢，

摄像头。

Answer 1

我正在考虑将值文本颜色设置为背景输入颜色，但 jQuery 不支持颜色动画，因此您需要 color 插件或 jQuery UI。两者都允许您使用用于背景颜色和颜色等属性的语法。

就像在here看到的一样