Tạo hiệu ứng cho background mờ nhạt dần

reset and begin

6/03/2011

sử dụng fadeto trong jquery nên lấy tạm tên là hiệu ứng background mờ dần. đây không phải là phugin mà là 1 script nhỏ
mô tả :
các ô vuông nền sẽ làm background mờ dần và hiện rõ.

link jquery

<script src="jquery.min.js" type="text/javascript"></script>

css:

<style type="text/css">
    body, html { background: #0a0a0a; }
    .nen { width: 100px; height: 100px; float: left; margin:5px; background: gray; z-index:-1;  } 
     #bodd{z-index:-1; position:absolute }
    body{
    font-family:Arial, Helvetica, sans-serif;
    background:url(../images/bg.gif) repeat;
    height:100%;
    font-size:12px;
}
.warp{
background:tranparent;
width:1002px;
_width:1002px;
border:1px solid #00FF33;
height:800;
overflow:hidden;

}
    </style>

màu của các ô vuông sẽ được xác định bởi class : nen, background: gray thay bằng màu bạn thích,hay kích thước width hay height tùy ý .
body

<body>
<center><div id="bodd">
<span class="nen"></span>
</div>
<div  class="warp"> wtf</div> 
</center>

đoạn script chèn trước </body>

<script>
 for(var i=1; i<147; i++){

        $('<div class="nen"></div>').appendTo('div#bodd');
}
</script>
<script type="text/javascript">
function randsort(c) {
    var o = new Array();
    for (var i = 0; i < c; i++) {
        var n = Math.floor(Math.random()*c);
        if( jQuery.inArray(n, o) > 0 ) --i;
        else o.push(n);
    }
    return o;
}
var e = $('.nen');
var c = e.size();
var r = randsort(c);
window.setInterval( function(){
$(".nen").each(function(i) {
    var e = $(this);
    e.fadeTo('slow', 0.05);
    setTimeout(function(){e.fadeTo('slow', 1);
    }, r[i]*50);
});
},6000);

</script>