using val() with jquery // input text dissappear with jquery

Question

I have an input box, where i would like a text to disappear. After googling around i found a nice solution over here: Fade out text value inside of text field using jQuery

However, for some reason it does not work with my code over here:

$(document).ready(function(){
  var input = $("#textboxid").val()
  input.animate({color:'white'},1000, function(){
    $(this).val('').css('color','black');
  }
});

Could you tell where i'm mistaken? thank you

EDIT: The text should disappear after user typed something in.

you can not animate text inside text box – Nishit Maheta Mar 13 '15 at 08:43 — Nishit Maheta, Mar 13 '15 at 08:43

Jeremy Thille · Answer 1 · 2015-03-13T09:38:10.583

1

val() gets the value of the textbox, that is what's written inside it. It's a string. You can't animate a string, you can animate a jQuery object.

Don't take $("#textboxid").val(), just take $("#textboxid").

EDIT :

I made it simply using just CSS3. This does not require any library and is hardware accelerated.

$("button").click(function() {
    $("input").css("color", "white");
});

input {
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="some value"/>
<button>Fade it away</button>

edited Mar 13 '15 at 09:38

answered Mar 13 '15 at 08:41

Jeremy Thille

26,047
12
43
63

if i take $("#textboxid"), the whole box disappears, while i want the text to disappear. Have a look here http://jsfiddle.net/7ksWA/1/ there it seems like the text disappears. – Alexander Ivanov Mar 13 '15 at 08:44
Got it. I have updated my answer. Just use a CSS3 transition. – Jeremy Thille Mar 13 '15 at 09:38

score 1 · Accepted Answer · edited May 23 '17 at 10:09

1

There are some syntax errors in your script:

$(document).ready(function () {
    var input = $("#textboxid"); //you have to use the object here and not the value-string
    input.animate({
        color: '#FFF'
    }, 1000, function () {
        $(this).val('').css('color', 'black');
    }); //the bracket was missing here
});

Demo

Furthermore jQuery don't support the animation of the color-attribute. See here for more information.

See this demo for the animation with the included jQuery-UI Library.

Reference

.animate

edited May 23 '17 at 10:09

Community

1
1

answered Mar 13 '15 at 08:45

empiric

7,825
7
37
48

got the animate, and corrected the mistakes, thanks! It looks like text does not disappears on the demo. – Alexander Ivanov Mar 13 '15 at 08:54
@AlexanderIvanov, in which demo the text did not disappear and what do expect when to happen ? – empiric Mar 13 '15 at 09:03
hups, did not see the test to disappear, my bad – Alexander Ivanov Mar 13 '15 at 09:33

using val() with jquery // input text dissappear with jquery

2 Answers2