2012-05-29 39 views

回答

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和這個附加非常沉重等等,以防萬一你遇到任何問題,請隨時發表評論.. :-)