Internet Explorer Animation Fix
if( jQuery('body').hasClass('ie8') || jQuery('body').hasClass('ie7') || jQuery('body').hasClass('ie9')) {
var projectImages = jQuery('.project-panel-overlay').siblings('img');

projectImages.hover(
function() {
    jQuery(this).animate({
    opacity: .4
    }, 300);
},
function() {
    jQuery(this).animate({
    opacity: 1
    }, 300);
}
);

jQuery('.hitbox').live('mouseenter',function(){
    jQuery(this).children('img').animate({
    opacity: .4
    }, 300);
});

jQuery('.hitbox').live('mouseleave',function(){
    jQuery(this).children('img').animate({
    opacity: 1
    }, 300);
});

<div class="project-panel">
                    <a class="hitbox" href=http://jpgalea.com/eco/projects/kangaroo-ground/>
                    <div class="project-panel-overlay">
                        <div class="project-panel-intro">
                            <p class="name">Kangaroo Ground</p>
                            <p class="year">2011/2012</p>
                        </div>
                    </div>

                    <img width="235" height="446" src="http://jpgalea.com/eco/wp-content/uploads/2012/01/featured41.jpg" class="attachment-featured-image-project wp-post-image" alt="" title="" />                    </a>
                </div>