Animate font size on hover

Animate font size on hover

Hi I've been trying to find a way to animate a font-size increase on hover - which I'd expect is probably quite straightforward but so far I can't seem to find how to do it (and incorporate into below).

I have a ul list using "hoverscroll" and would like to use it on this rather than just doing a straight CSS hover font size which is a bit naff.

any help or pointers where to start greatly appreciated - thanks

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  5. <head>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  8. <title>Test Page</title>
  10. <link href="jquery.hoverscroll-0.2.2.css" type="text/css" rel="stylesheet" />
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  12. <script type="text/javascript" src="jquery.hoverscroll-0.2.2.js"></script>
  13. <style type="text/css">
  14. body {font-family:Arial, Helvetica, sans-serif;}
  15. .hoverscroll {}
  16. #my-list ul {list-style-type:none;}
  17. #my-list li {list-style-type:none;position:relative;width: 250px;height: 30px;background: #fff;}
  18. li a {color:#777;font-size:16px;padding:7px 4px 7px 4px;display:block;text-decoration:none;}
  19. li a:hover {color:#000;z-index:10;font-size:22px;}
  20. div.ahover {position:absolute;z-index:9;}
  21. </style>
  22. <script type="text/javascript">
  23. $(document).ready(function() {
  24.   
  25. $('#my-list').hoverscroll(
  26. {
  28. vertical: true, // Display the list vertically or horizontally
  30. width:    250, // Width of the list container
  31. height:   400, // Height of the list container
  33. arrows:   true , // Display direction indicator arrows or not
  34. arrowsOpacity: 0.7, // Max possible opacity of the arrows
  36. debug: false // Debug output in the firebug console
  37. });

  39. });
  40. </script>

  42. </head>
  43. <body>
  44. <h1>auto scrolling links</h1>
  46. <ul id="my-list">
  47. <li><a href="#">First line</a></li>
  48. <li><a href="#">Another line here</a></li>
  49. <li><a href="#">More info here</a></li>
  50. <li><a href="#">Another line of info</a></li>
  51. <li><a href="#">Yet more stuff</a></li>
  52. <li><a href="#">Something here</a></li>
  53. <li><a href="#">Another line here</a></li>
  54. <li><a href="#">More info here</a></li>
  55. <li><a href="#">Another line of info</a></li>
  56. <li><a href="#">Yet more stuff</a></li>
  57. <li><a href="#">Something here</a></li>
  58. <li><a href="#">Another line here</a></li>
  59. <li><a href="#">More info here</a></li>
  60. <li><a href="#">Another line of info</a></li>
  61. <li><a href="#">Yet more stuff</a></li>
  62. <li><a href="#">Something here</a></li>
  63. <li><a href="#">Another line here</a></li>
  64. <li><a href="#">More info here</a></li>
  65. <li><a href="#">Another line of info</a></li>
  66. <li><a href="#">Yet more stuff</a></li>
  67. <li><a href="#">Something here</a></li>
  68. <li><a href="#">Another line here</a></li>
  69. <li><a href="#">More info here</a></li>
  70. <li><a href="#">Another line of info</a></li>
  71. <li><a href="#">Yet more stuff</a></li>
  72. <li><a href="#">Something here</a></li>
  73. <li><a href="#">Another line here</a></li>
  74. <li><a href="#">More info here</a></li>
  75. <li><a href="#">Another line of info</a></li>
  76. <li><a href="#">Yet more stuff</a></li>
  77. <li><a href="#">Something here</a></li>
  78. <li><a href="#">Another line here</a></li>
  79. <li><a href="#">More info here</a></li>
  80. <li><a href="#">Another line of info</a></li>
  81. <li><a href="#">Yet more stuff</a></li>
  82. <li><a href="#">Something here</a></li>
  83. <li><a href="#">Another line here</a></li>
  84. <li><a href="#">More info here</a></li>
  85. <li><a href="#">Another line of info</a></li>
  86. <li><a href="#">Yet more stuff</a></li>
  87. <li><a href="#">Something here</a></li>
  88. <li><a href="#">Another line here</a></li>
  89. <li><a href="#">More info here</a></li>
  90. <li><a href="#">Another line of info</a></li>
  91. <li><a href="#">Yet more stuff</a></li>
  92. <li><a href="#">Something here</a></li>
  93. <li><a href="#">Another line here</a></li>
  94. <li><a href="#">More info here</a></li>
  95. <li><a href="#">Another line of info</a></li>
  96. <li><a href="#">Yet more stuff</a></li>
  97. <li><a href="#">Something here</a></li>
  98. <li><a href="#">Another line here</a></li>
  99. <li><a href="#">More info here</a></li>
  100. <li><a href="#">Another line of info</a></li>
  101. <li><a href="#">Yet more stuff</a></li>
  102. <li><a href="#">Something here</a></li>
  103. <li><a href="#">Another line here</a></li>
  104. <li><a href="#">More info here</a></li>
  105. <li><a href="#">Another line of info</a></li>
  106. <li><a href="#">Yet more stuff</a></li>
  107. <li><a href="#">Something here</a></li>
  108. <li><a href="#">Another line here</a></li>
  109. <li><a href="#">More info here</a></li>
  110. <li><a href="#">Another line of info</a></li>
  111. <li><a href="#">Yet more stuff</a></li>
  112. <li><a href="#">Something here</a></li>
  113. <li><a href="#">Another line here</a></li>
  114. <li><a href="#">More info here</a></li>
  115. <li><a href="#">Last line of stuff</a></li>
  116. </ul>
  117. </body>
  118. </html>