Fade input text jquery

Question

I'm trying to create an elegant reset feature on my site such that when the user presses the reset button, the input boxes fade out the user input text and then fade in the placeholder text, ready for text to be re-entered.

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

});

The above shows what I am trying to achieve.. However this fades the whole input out then in. Could someone please tell me how to achieve this effect only on the text?

Many thanks,

Cam.

A CSS3 transition might work - http://www.css3.info/preview/css3-transitions/ — , Apr 20 '13 at 00:42

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

I was thinking in animate value text color to background input color but jQuery doesn't support color animations so you'll need the color plugin or, jQuery UI. Both allow you to use the syntax you're using for properties like background-color and color.

like seen on here

edited May 23 '17 at 12:12

Community

1
1

answered Apr 20 '13 at 00:43

Filipe Tagliacozzi

1,431
2
20
28

Fade input text jquery

1 Answers1