fadeout div in prototype

I need fadeout a div in my page using prototype. How can I fadeout following jquery code in prototype?

$('.exercise-main .content .loading-failure').fadeOut(function(){

    //my code

}

Solution

I think you will need to use script.aculo.us (which is an excellent add-on to the fantastic prototype.js) so as to achieve the Fade effect.

Basic Syntax

new Effect.Fade('id_of_element', [options]);

 OR

new Effect.Fade(element, [options]);

Complete Code.

<html>
<head>
<title>script.aculo.us examples</title>

   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects"></script>
   <script type="text/javascript">

   function FadeEffect(element){
       new Effect.Fade(element, 
       { duration:1});
   }
   function ShowEffect(element){
       new Effect.Appear(element, 
       {duration:1, from:1.0, to:1.0});
   }

   </script>
</head>
<body>
<div onclick="FadeEffect('hideshow')">
    Click me to fade out the image
</div>
<br />
<div onclick="ShowEffect('hideshow')">
    Click me to display the image once again
</div>
<br />
<div id="hideshow">
    <img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>

</body>
</html>

Tutorial link - http://www.tutorialspoint.com/script.aculo.us/scriptaculous_fade_effect.htm

I myself have used prototype.js and this add-on very heavily so just in case you face any issue, feel free to comment.. :-)