Can't make this work in Internet Explorer.

Can't make this work in Internet Explorer.

Can anyone help me with this?  I have a simple animation that works in Chrome, Safari and Firefox but of course fails in IE.

What is supposed to happen is when the mouse enters the "tttrigger" class the jquey code snippet finds the sibling of class "ftront" and reduces its height thus revealing the text in the sibling "tback".  As mentioned this works perfectly in all but IE (both 8 and 9 )

Unexpected behaviour 1 - in IE if you hover over the blue square it's height is animated, however if you hover over where the text will be it does an odd "shutter" motion opening and closing rapidly.

Unexpected behavior 2 - if the div of class "tfront", as per line 72) is changed to an img tag as per line 77 (red background)  then the animation breaks completely IE and no longer works as a link either.  Again this is only broken in IE.

What I would like to know is what is causing behaviours 1 and 2 and how I can fix them to work in all four major browsers (and thus avoid the problem in the future).  I'm sure it will be something simple and I'll kick myself when I see it.  But I just can't see it.

Many thanks in advance.

Example code:
  2. <html>
  3. <head>
  4. <script src="http://code.jquery.com/jquery-latest.js"></script>
  5. <style type="text/css">
  6. a {
  7. text-decoration:none;
  8. }
  9. .tile {
  10. position:absolute;
  11. display:block;
  12. width:115px;
  13. height:115px;
  14. text-decoration:none;
  15. cursor:pointer;
  16. }
  17. .ttrigger {
  18. position:absolute;
  19. display:block;
  20. width:115px;
  21. height:115px;
  22. z-index:3;
  23. }
  24. .tfront{
  25. position:absolute;
  26. display:block;
  27. width:115px;
  28. height:115px;
  29. background-color:#911;
  30. border:0px;
  31. z-index:2;
  32. }
  33. .tback {
  34. position:absolute;
  35. display:block;
  36. width:115px;
  37. height:115px;
  38. background-color:#DDD;
  39. z-index:1;
  40. }
  41. .tback span {
  42. position:absolute;
  43. background-color:#DDD; 
  44. color:#000;  
  45. width:110px; 
  46. bottom:4px; 
  47. left:5px;
  48. }
  49. .t1 {
  50. top:100px;
  51. left:100px;
  52. }
  53. .t2{
  54. top:100px;
  55. left:320px;
  56. }
  58. </style>
  59. <script type="text/javascript">
  60. $(document).ready(function(){
  61. $(".ttrigger").hover(function(){
  62. $(this).parent().find(".tfront").animate({height:90},"fast");
  63. },function(){
  64. $(this).parent().find(".tfront").animate({height:115},"fast");
  65. });
  66. });
  67. </script>
  68. </head>
  69. <body style="position:absolute;">
  70. <div class="tile t1">
  71. <a href="http://www.google.co.uk" class="ttrigger"></a>
  72. <div class="tfront" style="background-color:#119;"></div>
  73. <div class="tback"><span>Some Text</span> </div>
  74. </div>
  75. <div class="tile t2">
  76. <a href="http://www.google.co.uk" class="ttrigger"></a>
  77. <img src="buy.png" class="tfront" />
  78. <div class="tback"><span>Some Text</span> </div>
  79. </div>
  80. </body>
  81. </html>