JS "Filling" animation with semi-transparent images (for preloaders, for example). See demos: http://www.youtube.com/watch?v=zsWTjjl29ls and http://jsfiddle.net/FE2jd/

FillingAnimation.html

<div id="preloader">
	<div class="sun">
		<div class="o"></div>
		<div class="w"></div>
	</div>
	Loading
</div>

script.js

// using JQuery
var $loader = $('#preloader');

var animateLoader = function ($loader) {
    var $o = $loader.find('.o');
    var $w = $loader.find('.w');

    var targetWHeight = $w.height() == 0 ? 87 : 0;

    $w
        .animate({ height: targetWHeight }, {
            duration: 1000,
            step: function (now, fx) {
                fx.now = parseInt(now);
                $o.height(87 - fx.now);
            },
            complete: function () {
            	// stop animation if loader is hidden
                if ($loader.is(':visible')) {
                    animateLoader($loader);
                }
            }
        });

};

var showPreloader = function () {
    $loader.fadeIn();
    animateLoader($loader);
};

var hidePreloader = function () {
    $loader.fadeOut();
};

showPreloader();

style.css

#preloader {
  position: absolute;
  width: 200px;
  height: 130px;
  text-align: center;
  top: 50%;
  left: 50%;
  margin: -65px 0 0 -100px;
  color: #ff8a00;
  text-transform: uppercase;
  display: none;
}

#preloader .sun {
    display: block;
    margin: auto;
    width: 87px;
    height: 87px;
    margin-bottom: 15px;
}

#preloader .sun  .w {
    height: 0;
    width: 87px;
    background: url("http://imageshack.us/a/img833/6025/jlg4.png") bottom no-repeat;
}

#preloader .sun .o {
    height: 87px;
    width: 87px;
    background: url("http://imageshack.us/a/img196/448/iqk8.png") top no-repeat;
}

Demos:
http://jsfiddle.net/terion/rFhhg/
http://www.youtube.com/watch?v=zsWTjjl29ls