Whil ini load

by Kenneth Luplau-Brøgger

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<div class="boxes first">
   <div class="horBoxes">
        <div class="box">
            <div>
                <h2>Headline</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat tortor in odio vulputate id tincidunt risus luctus. </p>
                <p><a href="">Read more</a></p>
            </div>
        </div>
        <div class="box">
            <div>
                <h2>Headline</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat tortor in odio vulputate id tincidunt risus luctus. </p>
                <p><a href="">Read more</a></p>
            </div>
        </div>
        
        <div class="box big">
            <div>
                <h2>Headline</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Nunc volutpat tortor in odio vulputate id tincidunt risus luctus. 
                    Morbi sed odio ac elit bibendum ultrices et vel justo. 
                    Curabitur varius magna ac dui vulputate sed porttitor nibh semper. </p>
                <p><a href="">Read more</a></p>
            </div>
        </div>
    </div>
    
    
    <div class="horBoxes">
        <div class="box big">
            <div>
                <h2>Headline</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Nunc volutpat tortor in odio vulputate id tincidunt risus luctus. 
                    Morbi sed odio ac elit bibendum ultrices et vel justo. 
                    Curabitur varius magna ac dui vulputate sed porttitor nibh semper. </p>
                <p><a href="">Read more</a></p>
            </div>
        </div>
        <div class="box">
            <div>
                <h2>Headline</h2>
           ...

CSS

body {
    margin: 20px;
}
.boxes {
    width: 804px; /*incl. borders*/
    overflow: hidden;
}
.box {
    border: 1px solid #ccc;
    float: left;
    width: 198px;
    height: 198px;
    overflow: hidden;
    font-family: "arial";
    font-size: 13px;
    display: none;
}
.boxes .horBoxes:first-child .box {
    border-top: 0px;
}
.boxes.first .horBoxes:first-child .box {
    border-top: 1px solid #ccc;
}
.horBoxes {
    float: left;
    clear: left;
    margin-top: -1px;
}
.horBoxes:first-child {
    margin-top: 0px;
}
.horBoxes:last-child .box {
    margin-bottom: 0;
}
.box > div {
    padding: 20px;
    height: 160px;
    width: 160px;
}
.box+.box {
    margin-left: -1px;
}
.box.clear {
    clear: left;
}
.box.big {
    width: 397px; /*plus 1px border*/
    background: url("http://fitnesshealthexercise.com/wp-content/uploads/2012/05/physical-health.jpg") scroll center center;
}
.box.big > div {
    width: 360px;
}

JavaScript

var APP = APP || {};

APP.fn = {};

APP.fn.loadTiles = function($container) {
    if (APP.fn.loadTiles.ready) {
        APP.fn.loadTiles.ready = false;
    } else {
        return false;
    }
    
    if (typeof $container == "undefined") {
        $container = APP.fn.loadTiles.next;
    }
    
    var elements = []; //Container for all elements
    
    $(".horBoxes", $container).each(function(index, key) {
        var $horBox = $(this),
            boxLength = $(".box", $horBox).length;
        
        if (index == index) {
            $horBox.children().each(function(index, key) {
                elements.push($(this));
            });
        } else {
            $horBox.children().each(function(index, key) {
                elements.push($horBox.children().eq((boxLength -1) - index));
            });
        }
    });
    
    $(elements).each(function(index, key) {
        var element = $(this);
        var origWidth = element.width();
        var origHeight = element.height();
        var baseSpeed = 300;
        var extraSpeed = 100;
        var easing = "easeOutExpo";
        var prestate = {
            "margin-top": "-0px"
        };
        element.width(0).hide();
    
        var timeToNext = baseSpeed + (index * extraSpeed);
    
        var chainAnim = setTimeout(function() {
            if (element.is("REMOVE.big")) {
                element.width(origWidth);
                element.slideDown(baseSpeed, easing);
                element.css(prestate).show().animate({
                    "margin-top": 0
                }, baseSpeed, easing);
            } else {
                element.css(prestate).show().animate({
                    width: origWidth,
                    "margin-top": 0
                }, baseSpeed, easing);
            }
    
        }, timeToNext, easing);
    });
    
    if ($container.next(".boxes").length) {
        APP.fn.loadTiles.next = $container.next();
        APP.fn.loadTiles.ready = true;
    } else {
       ...