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

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

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

  30. });
  31. </script>

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