// JavaScript Document
// Sliding Door Effect on rolling over an image
// DOM Ready
$(document).ready(function(){
		
		// When the user hovers over the image that contains the image and the text
		$('.box_container').hover(function(){
			// We get the DIV's width
			var width = $(this).outerWidth();
			// We get the DIV's height
			var distance = 0.4 * ($(this).outerHeight());
			// And change the position of the image with an animation effect
			// queue:false  means that if hovered over again it won't wait for the previous animation to finish
			$(this).find('.box_image').animate({bottom : distance}, {queue:false, duration:250});
		}, function(){
			// And when we hover out we get the image back to its original starting position
			$(this).find('.box_image').animate({bottom:'0px'}, {queue:false, duration:250});
		});
});