How can I make an HTML element fade away using jQuery?

Question

I have a text box in my HTML file that I'd like to make fade away when a button is clicked. Here is what I have so far:

$("#textButton").click(function() {
    // make text dissapear here
});

The id of the text box is textBox. What should I put in the function to make this work?

Answer 1

In your case, your code would look something like this:

$("#textButton").click(function() {
    $("#textBox").fadeTo('slow', 0); 
});

You use the fadeTo() method in jQuery. The first value would be the speed, and the second value would be how faded you would like it (0 making it disappear).

Answer 2

You can use the following links to explore more about fadeIn & fadeOut functions.

https://api.jquery.com/fadeout/

https://api.jquery.com/fadein/

Code example:

$(document).ready(function(){
 $("#textButton").click(function() {
    $("p").fadeOut();
  );
  $("#textButton2").click(function() {
     $("p").fadeIn();
  });
});