原型中的淡出div

时间:2012-05-29 13:25:38

标签: prototypejs

我需要使用原型在页面中淡出div。如何在原型中淡出jquery代码?

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

    //my code

}

1 个答案:

答案 0 :(得分:4)

我认为你需要使用script.aculo.us(这是一个出色的prototype.js的附加组件),以达到淡化效果。

基本语法

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

 OR

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

完整代码。

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

教程链接 - http://www.tutorialspoint.com/script.aculo.us/scriptaculous_fade_effect.htm

我自己使用了prototype.js和这个附加组件,以防你遇到任何问题,请随时发表评论......: - )