cufon font-size is not changing smoothly on hover event in order to produce fisheye effect on menu(text)
<p>this is my first post about Cufon font as i am new to jquery &amp; javascript. I am trying to create vertical fisheye effect on menu i.e on text. what i want is when i hover over a current menu,font-size of current menu as well as font-size of 2 sub-menu both above and below should change smoothly.It was working correctly before using Cufon font, but right now there is a delay at about 1/2 sec which affects the smoothness of effect.</p>

<p>Here is my html file.....................</p>

<pre><code>    &lt;html&gt;
    &lt;head&gt;
    &lt;script type="text/javascript" src="js/cufon-yui.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/my-custom-font_400.font.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
     Cufon.replace('#scroller ul li a', { 
     fontFamily: 'my-custom-font',
     hover:true
   });
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;div id="rollerBox"&gt;
           &lt;div id="scroller" &gt;    
                    &lt;ul id="innerContainer"&gt;
                        &lt;li class="pictures1"&gt;&lt;a href="#"&gt;link1&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="pictures2"&gt;&lt;a href="#"&gt;link2&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="pictures3"&gt;&lt;a href="#"&gt;link3&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="pictures4"&gt;&lt;a href="#"&gt;link4&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="pictures3"&gt;&lt;a href="#"&gt;link5&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="pictures4"&gt;&lt;a href="#"&gt;link6&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt; &lt;!-- #keywords --&gt;                      
           &lt;/div&gt; &lt;!-- #scroller --&gt;                     
      &lt;/div&gt; &lt;!-- #rollerBox --
    &lt;/body&gt;
   &lt;/html&gt;

   and here is my code for fisheye effect on menu-text.......

   and here is my code for fisheye  effect(on text-menu).........

    $(document).ready(function(){
      $("#scroller ul li a").hover(function(){
         $(this).css({"font-size":"28px","color":"green"})
         $(this).parent().next().children().css({"font-size":"26px"})
         $(this).parent().prev().children().css({"font-size":"26px"})
         $(this).parent().nextAll().eq(1).children().css({"font-size":"25px"})
         $(this).parent().prevAll().eq(1).children().css({"font-size":"25px"})
        Cufon.refresh();
   },function(){   
         $(this).css({"font-size":"24px","color":"white"})
         $(this).parent().next().children().css({"font-size":"24px"})
         $(this).parent().prev().children().css({"font-size":"24px"})
         $(this).parent().nextAll().eq(1).children().css({"font-size":"24px"})
         $(this).parent().prevAll().eq(1).children().css({"font-size":"24px"})
       Cufon.refresh();
   })
  })
</code></pre>
