Is there a way to animate the opacity of textarea with jQuery?

Question

I need to animate the opacity of the text in textarea, so it fades away.This happens when someone presses enter. I have setup the code for the enter press, but can't get the code to animate to work. Here is the code I have:

$(document).keydown(function(e){
if(e.which === 13){
// here I would like to animate the text
   };
});

score 2 · Accepted Answer · answered Dec 11 '11 at 22:32

2

For only the text, I would think you would need jQueryUI, and do something like this:

$("#textarea").keydown(function(e){
    if(e.which === 13){
        $(this).animate({color: 'transparent'},1000);
   }
});

Here's a fiddle: http://jsfiddle.net/adeneo/7pkNK/

Be aware that the cursor will disappear as well, and as far as I know the only way around it is to create a cursor with an animated gif or some other custom code.

answered Dec 11 '11 at 22:32

adeneo

312,895
29
395
388

Thanks, the cursor disappearing is perfect for my case.It fits what i need to do.Thank you very much. – fluxus Dec 11 '11 at 22:40
@suludi You should accept this as the answer if it was a solution for you. – Vigrond Dec 11 '11 at 22:41
Also please, do i need to add the whole jQuery UI, or i can only add rhe effects stripped part. – fluxus Dec 11 '11 at 22:42
You would only need the UI Effects core to animate colors. – adeneo Dec 11 '11 at 22:44

Dominic Green · Answer 2 · 2011-12-11T22:31:43.693

1

    $(document).keydown(function(e){
     if(e.which === 13){
      $(formelement).animate({ color: "#FFFFFF" }, 600);

   };
});

edited Dec 11 '11 at 22:31

answered Dec 11 '11 at 22:26

Dominic Green

10,142
4
30
34

This fades the whole textarea, i just want to fade the text. – fluxus Dec 11 '11 at 22:29

score 0 · Answer 3 · answered Dec 11 '11 at 22:28

0

Would this example from the JQuery API help?

<div id="clickme">
   Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

Check out the API for .fadeIn() and .fadeTo() as well.

In your case, you could just use $('#text' ).fadeOut();

answered Dec 11 '11 at 22:28

dremme

739
2
10
18

Thanks, i now what FadeOut does, but i need to fade the text away, not the whole textarea. – fluxus Dec 11 '11 at 22:31
@suludi If you wrap text in a or
tag, you can do something like: `$('#textarea span').fadeOut()`. This will fade only the text.
– dremme Dec 11 '11 at 22:37
That's not possible, you can't wrap the text in a textarea in HTML elements. – adeneo Dec 11 '11 at 22:40
@suludi you can also assign the text an ID `` then... `$('#text').fadeOut(); – dremme Dec 11 '11 at 22:41
@adeneo Sorry I misspoke. I specified another element like a
with the ID of "textarea". Not the HTML element .
– dremme Dec 11 '11 at 22:43

score 0 · Answer 4 · edited May 23 '17 at 10:27

Try doing it using jQuery's fadeOut method.

$(document).keydown(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 13) {
        //here i would like to animate the text
        $('#idofobject').fadeOut(optionalduration, optionalcallback);
    }
});

I'd retrieve the key being pressed using the second line of my code, as per this SO answer.

After reading your comment to @dremme, I don't believe there's a way to fade just the text that is simple. You'd have to place a div over top of your textarea with the text in it, delete the text that is currently in the textarea, and fadeout your covering div.

Is there a way to animate the opacity of textarea with jQuery?

4 Answers4