jQuery fadeOut and fadeIN


fadeIn()


makes a hidden element fade into view. First, the space for the element appears on the page (this may mean other elements on the page move out of the way); then the element gradually becomes visible. This function does not have any effect if the element is already visible on the page. If you do not supply a speed value, the element fades in using the default setting (400 milliseconds).

fadeOut()

hides a visible element by making it fade out of view like a ghost. It doesn’t have any effect if the element is already hidden, and like the fadeIn() function, if you do not supply a speed value, the element fades out over the course of 400 milliseconds.

We are presenting a very practical example of fadeOut designed for Grade 3 math students. The student is given an addition problem. If he supplies a correct answer, A "correct" is printed out which fades out in 2 seconds. 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js">
</script>
<script>
$(document).ready(function(){
var rand1 = Math.round(Math.random()*8+1);
$("input#id2").val(rand1);

var rand2 = Math.round(Math.random()*8+1);
$("input#id3").val(rand2);

  $("input#id4").keyup(function(){
    var x = $("input#id4").val();
    var y = Number($("input#id2").val()) + Number($("input#id3").val());
   if ( y == Number($("input#id4").val())) {var msg ="Correct";
   $("span#id5").html(msg );
      $("span#id5").fadeOut(2000);      
     }
   else {var msg ="InCorrect";
$("span#id5").html(msg);
   }

  });
});
</script>
</head>
<body>

<input id ="id2" type="text" value ="Generate"  style="border: none" readonly>
<br />
+<input id ="id3" type="text" value ="Generate"  style="border: none" readonly>
<br />
----<br />
<input  id="id4" type="text" style="border: none">
<br />
----<br />
<span id ="id5">Enter Result</span> <br />

</body>
</html>


You may like to try this example here.