hugh
/
vegas


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Document</title>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="test" style="width: 100px; height: 100px; background: red"></div>

    <script type="text/javascript">
        var fadeIn = function(element, options) {
            var start = new Date,
                from  = 0,
                intvl = setInterval(function() {
                    var passed   = new Date - start,
                        progress = passed / options.duration;

                    element.style.opacity = from + progress;

                    if (progress >= 1) {
                        clearInterval(intvl);

                        options.complete();
                    }
                }, options.delay || 10);
        }

        fadeIn(document.getElementById('test'), {
            duration: 2000,
            complete: function() {
                alert('Complete');
            }
        });
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>