Q:

Need LightBox2 to work alongside my hover animation

It seems for me that it is all caused by a conflict of js files. Of which I am still unable to completely resolve.
View Site Here
Originally my issue was that I wanted to integrate a .hover class java script animation to reduce my overall page height. Since:
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $("#div1").hover(
//on mouseover
function() {
  $(this).animate({
    height: '+=250' //adds 250px
    }, 'slow' //sets animation speed to slow
  );
},
//on mouseout
function() {
  $(this).animate({
    height: '-=250px' //substracts 250px
    }, 'slow'
  );
}
);

});
</script> 

<style type="text/css">
#div1{
height:50px;
overflow:hidden;
background: red; /* just for demo */
}
</style>

<body>
<div id="div1">This is div 1</div>
</body>

It seemed this was the easiest way to implement this animation. So I created first a  Static Block and placed a modified version of the above.
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

$(".short-description").hover(
//on mouseover
function() {
$(this).animate({
height: '+=250' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);

});
</script>

Then I modified styles.css within my theme skin css folder editing line 1987 to add height and overflow attributes:
.product-view .product-shop .short-description { margin:10px 0; height:200px; overflow: hidden; }

This solution worked but interfered with the default magento image viewer. On the product pages the main product image would not resize (zoom) to fit in the image box. I tried tweaks and fixes before deciding to implement shadowbox. I never was able to implement shadowbox and I later changed to LightBox2 due to the extension being available at magentocommerce.com with review stating functionality for 1.7.0.2.
I installed the extension download I received directly from the publisher via connect manager within the magento back-end with no output errors. For a while the LightBox2 worked great but after trying different suggested fixes such as placing the following line on the page.xml file:
<action method="addItem">
    <type>skin_js</type>
    <name>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</name>
</action>

It stopped working after flushing the css/js cache, I got the WSOD / blank screen on the front-end but normal behavior on the back-end. After trying many different fixes it seems the problem came from the widget containing the static block being Display On - All Product Types, All Products, Block Reference - Page Header, CMS - Static Block Default Template. When I moved the widget to a different location such as Main Content Area, updated the page.xml to have this line first:
<action method="addJs"><script>lib/jquery.min.js</script></action>

placed the .js file locally and then refreshed the blocks layout cache, the front-end came back alive. 
I updated the static block to:
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
// ]]></script>
<script type="text/javascript" src="/js/lib/jquery.min.js">// <![CDATA[
$j(document).ready(function() {

$j(".short-description").hover(
//on mouseover
function() {
  $j(this).animate({
    height: '+=300' //adds 300px
    }, 'slow' //sets animation speed to slow
  );
},
//on mouseout
function() {
  $j(this).animate({
    height: '-=300px' //subtracts 300px
    }, 'slow'
  );
}
);

});
// ]]></script>

Still no hover animation. According to view source this static block never was being placed on the page anywhere. I moved the script from a static block and placed it in the System -> Configuration -> Design -> Miscellaneous Scripts (This will be included before head closing tag in page HTML.):
<script type="text/javascript" src="http://foryourrestroom.com/js/lib/jquery.min.js">
var $j = jQuery.noConflict();

$j(document).ready(function() {

$j(".short-description").hover(
//on mouseover
function() {
  $j(this).animate({
    height: '+=250px' //adds 250px
    }, 'slow' //sets animation speed to slow
  );
},
//on mouseout
function() {
  $j(this).animate({
    height: '-=250px' //substracts 250px
    }, 'slow'
  );
}
);

});
</script>

The script now loads on the page and is visible from view source but conflicting with slider on home page. Now I have no working LightBox2 and no animation.
Here is the script for LightBox2 according to view source:
<script type="text/javascript">
//<![CDATA[
jQuery('.ig_lightbox2').fancybox({"padding":10,"margin":20,"opacity":0,"modal":0,"cyclic":1,"autoScale":1,"centerOnScroll":1,"hideOnOverlayClick":1,"hideOnContentClick":0,"overlayShow":1,"overlayOpacity":0.3,"overlayColor":"#333333","titleShow":1,"titlePosition":"float","transitionIn":"fade","transitionOut":"fade","speedIn":300,"speedOut":300,"changeSpeed":300,"changeFade":"fast","easingIn":"swing","easingOut":"swing","showCloseButton":1,"showNavArrows":1,"enableEscapeButton":1});
//]]>
</script>

Here is the script for the hover animation according to view source:
<script type="text/javascript" src="http://foryourrestroom.com/js/lib/jquery.min.js">
var $j = jQuery.noConflict();

$j(document).ready(function() {

$j(".short-description").hover(
//on mouseover
function() {
  $j(this).animate({
    height: '+=250px' //adds 250px
    }, 'slow' //sets animation speed to slow
  );
},
//on mouseout
function() {
  $j(this).animate({
    height: '-=250px' //substracts 250px
    }, 'slow'
  );
}
);

});
</script></head>

Greatly appreciate any suggestions to get LightBox2 to work alongside my hover animation.

A:

I checked your code and it seems the issue was the jQuery No conflict variable was missing.
So just use the full jQuery format as follows:
jQuery(document).ready(function() {
    jQuery(".short-description").hover(
    //on mouseover
    function() {
      jQuery(this).animate({
        height: '+=250px' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
    function() {
      jQuery(this).animate({
        height: '-=250px' //substracts 250px
        }, 'slow'
      );
    }
    );
});

And don't forget the CSS styles for the div that has "short-description" class:
.product-view .product-shop .short-description {
    height: 100px;
    margin: 10px 0;
    overflow: hidden;
}

Blessings.

