mootools实例：更改div的透明度动画效果

为了页面的美观效果，经常有遇到这种动画效果，使用mootools的实现方法如下：

<style type="text/css">
ul { margin:0px; padding:0px;  list-style-type:none;}
#title2{ line-height:30px; background-color:#00F; cursor:pointer; width:480px; color:#FFF; padding-left:20px; }
#showdiv2{ display:block; height:0px; overflow:hidden; }
#showdiv2{ height:130px; }
#showdiv2 li { width:480px; line-height:25px; height:25px; padding-left:20px; background-color:#ccc; border-bottom:1px solid #fff; }
</style>
<script type="text/javascript" src="http://www.aspbc.com/js/mootools.js"></script>
<script type="text/javascript">
//当页面加载完后
window.addEvent('domready',function(){
$('title2').addEvent('click',function(){
  if($(this).get("status")==0){			
    $(this).set('status',1);
    $(this).set('html','点击不透明');	
    $('showdiv2').fade(0); //0表示透明，1表示不透明，取值范围 1 >= x >=0
 }
 else
 {
    $(this).set('status',0);
    $(this).set('html','点击透明');
    $('showdiv2').fade(1);
 }
 });
});
</script>
<div id="title2" status="0" >点击透明</div>
<ul id="showdiv2">
 <li id="new_1">新闻1</li>
 <li id="new_2">新闻2</li>
 <li id="new_3">新闻3</li>
 <li id="new_4">新闻4</li>
 <li id="new_5">新闻5</li>
</ul>

(鼠标移到代码上去，在代码的顶部会出现四个图标，第一个是查看源代码，第二个是复制代码，第三个是打印代码，第四个是帮助)

总结一下：这里的知识点和http://www.aspbc.com/tech/showtech.asp?id=1288这个例子中的差不多。只是这里增加了一个：更改层的透明度的方法： 
$(‘showdiv2’).fade(0);  //0表示透明，1表示不透明，取值范围 1 >= x >=0，可填写0.5等小数。

原创文章，转载请注明来源:asp编程网（www.aspbc.com ），谢谢