Home/ Questions/Q 8000523
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T15:49:23+00:00

I need fadeout a div in my page using prototype. How can I fadeout

  • 0

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

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.. 🙂

    • 0