Emulate flipping with JS

leafFlip.js

/*
	next = top half (hidden) (.topHalfNext from part 2)
	current = top half (currently showing) (.topHalfCurrent from part 2)
	main = main background item (also represents the bottom half) (.main from part 2)
	title = updated title for the item
*/

// Set the next hidden item to the top and it's content to the updated display string
next.css({top: 0}).html(title);

// Animate the current top half to the halfway point, in 100 ms
current.animate({
	top: next.height()
}, {
    duration: 100,
    complete: function(){
    	
    	// When the 'flip' animation is done swap the classes for next and current, ready for the next time
        next.removeClass('topHalfNext').addClass('topHalfCurrent');
        current.removeClass('topHalfCurrent').addClass('topHalfNext');
        
        // make the background a bit darker (using a class)
        main.addClass('dark');
        
        // Change the content text of main
        main.html(title);
        
        // if main isn't visible (eg. it's the first run), show it.
        if(main.not('visible')){
        	main.show();
        }
        
        // After 50ms, remove the 'dark' background
        setTimeout(function(){
            main.removeClass('dark');
        }, 50);
    }
});