Cufon isn't playing nicely with jQuery...help!

Cufon isn't playing nicely with jQuery...help!

Hi, so I have four sets of links that when hovered over highlight the link itself and the other link. Simple. I have the jQuery working for that and everything's fine.

But when using Cufon (an font replacement js) the remote highlighting doesn't seem to work. Does anyone have any idea why this would be? I thought that don't conflict. The code:

  1. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript">
        jQuery(document).ready(function() {
          
          var doubleHighlight = function(element1, element2, class) {
            element1.hover(
              function() {
                element2.addClass(class);
              },
              function() {
                element2.removeClass(class);
              }
            );
            
            element2.hover(
              function() {
                element1.addClass(class);
              },
              function() {
                element1.removeClass(class);
              }
            );
          };
          doubleHighlight(jQuery("#abouttop"), jQuery("#aboutbottom"), "highlight_about");
          doubleHighlight(jQuery("#worktop"), jQuery("#workbottom"), "highlight_work");
          doubleHighlight(jQuery("#blogtop"), jQuery("#blogbottom"), "highlight_blog");
          doubleHighlight(jQuery("#contacttop"), jQuery("#contactbottom"), "highlight_contact");
        });
      </script>
            <script src="cufon-yui.js" type="text/javascript"></script>
    <script src="gothamxlight_300-gothamxlight_300.font.js" type="text/javascript"></script>
    <script src="gothamlight_300-gothamlight_500.font.js" type="text/javascript"></script>
            <script type="text/javascript">
               Cufon.replace('#type', { fontFamily: 'gothamxlight', hover: true});
                Cufon.replace('#smalltype', { fontFamily: 'gothamlight', hover: true});
                Cufon.replace('#nav', { fontFamily: 'gothamlight', hover: true});
            </script>
    </head><body>
    <div id="box">
    <div id="nav">
    <a style="margin-right:25px;" id="abouttop" href="about.htm">about</a>
    <a style="margin-right:25px;" id="worktop" href="work.htm">work</a>
    <a style="margin-right:25px;" id="blogtop" href="blog.htm">blog</a>
    <a id="contacttop" href="contact.htm">contact</a>
    </div>
    <div id="logo"><img src="logo.png"/></div>
    <div id="type">
    <h1><a id="aboutbottom" href="about.htm">Hi, I’m Rob.</a> <a id="workbottom" href="work.htm">Check<br />
    out my work</a> or<br />
    <a id="blogbottom" href="blog.htm">find out what I’ve<br />
    been up to.</a></h1>
    </div>
    <div id="smalltype">Or skip all the hubaloo and <a id="contactbottom" href="contact.htm"><b>get in touch.</b></a></div>
    </div>
    </body>
    </html>