basic jquery issue.

i am in the process of becoming more acquainted with jquery. what i am experiencing is most likely a very easy issue to the more advanced user.

i am writing an animation script on hover. very basic: on hover make text and cell larger.
on mouseout, resize.

it is going fine, but at the beginning of the hover my text which is valign:"middle" is shifting alignmnet to top of cell then animating towards center.

the effect i desire is that it only grows in size. it properly reanimates on mouseout, and i am guessing on mouseover i am just resetting a style i am unaware of.

any help would be great!

<html>
<head>
<style>
table
{ 
margin-left: auto;
margin-right: auto;
}

</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>

<table id="myTable" height=100% width=100% valign="middle">
<tr><th id="status">MY LINK</th></tr>
</table>


<script>
jQuery('#status').ready(function(){
$('#status').mouseover(function(e){
  $X=e.pageX;
$Y=e.pageY;
$a='#status';
$($a).css("color","#ffffff");
$($a).css("cursor","pointer"); 
$($a).css("background-color","#000000");
$($a).css("valign","middle");
$($a).animate({fontSize:"15em",width:"100%",height:"100%"},1500); //problem area

}); 

$('#status').mouseout(function(){
 $('#status').css("color","#000000");
 $('#status').css("background-color","#ffffff");
 $('#status').css("cursor","default"); 
$($a).animate({fontSize:"1em"},1500);
}); 


$('#status').click(function(){
top.location="www.linktosomewhere.com";
});

});

</script>

</body>
</html>

<html> <head> <style> table.myTable { valign: middle; margin-left: auto; margin-right: auto; height: 100%; width: 100%; halign: center; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script> jQuery('#status').ready(function(){ $('#status').mouseover(function(e){ $X=e.pageX; $Y=e.pageY; $a='#status'; $($a).css("color","#ffffff"); $($a).css("cursor","pointer"); $($a).css("background-color","#000000"); $($a).css("valign","middle"); $($a).animate({fontSize:"15em",opacity: 0.25},1500); }); $('#status').mouseout(function(){ $('#status').css("color","#000000"); $('#status').css("background-color","#ffffff"); $('#status').css("cursor","default"); $($a).animate({fontSize:"1em",opacity: 1},1500); }); $('#status').click(function(){ top.location="http://www.jsitelinkedto.com"; }); }); </script> <table class="myTable"> <tr><th id="status">MY LINK</th></tr> </table> </body> </html>

basic jquery issue.

jason_m

daveVk

jason_m

jason_m

daveVk

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week