EDIT: had to leave quickly so didn't get to finish, I decided to use jquery ui for the example (you need core):
<html><head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<style>
#line_three { width:100%; }
.line3_top {
position:absolute;
top:113px;
left:0px;
}
.line3_btm {
position:absolute;
bottom:100px;
left:0px;
}
</style>
<script type="text/javascript">
var topbtm = true;
$(document).ready(function(){
$("#line_three").mouseenter(function(){
if ( topbtm ) {
$("#line_three").switchClass("line3_top","line3_btm",400);
} else {
$("#line_three").switchClass("line3_btm","line3_top",400);
}
topbtm = !topbtm;
});
});
</script>
</head><body>
<div id="line_three" class="line3_top">
hello;
</div>
</body></html>
http://jsfiddle.net/syVzK/1/ (changed toggle switch to prevent over animation)
I like some other suggestions as well.
EDIT2: Just tested in IE... it works oddly. Maybe have to do straight because of odd behavior in IE with Jquery UI switch class.
EDIT3:
Ok, I got this working for IE and FF... Some notes though. The +20 is to keep it from jumping. The test for innerHeight of 0 is in case height isn't set for the element (or body), so if it's in an div that's positioned, then set height.
Also, this did not work in jsfiddle, but worked on a regular webpage. Avoid, jsfiddle for this.
<script type="text/javascript">
var topbtm = 1,top3=113,btm3=100;
$(document).ready(function(){
$("#line_three").mouseenter(function(){
var ih = $(this).offsetParent().innerHeight();
if (ih==0){ih=$(document).innerHeight();}
if ( topbtm==1 ) {
topbtm=-1;
$("#line_three")
.animate({"top":(ih-(btm3+20))}
,500
,function(){
$(this).css({"top":"auto","bottom":btm3});
})
topbtm=0;
} else if ( topbtm==0 ) {
topbtm=-1;
$("#line_three")
.animate({"bottom":(ih-(top3+20))}
,500
,function(){
$(this).css({"bottom":"auto","top":top3});
})
topbtm=1;
}
});
});
</script>