Superfish with hoverIntent Reference Error: makeTall not defined

[alann]

All,

I am trying to implement the superfish(http://users.tpg.com.au/j_birch/plugins/superfish/) navigation drop down menu with the hover intent js. I have the html/css properly coded and placed. The superfish js is implemented along with the hoverIntent js file. My problem is that when I have the following code in the file the code works but with the error: ReferenceError: makeTall is not defined, which makes sense because the functions for makeTall and makeShort are not defined.

$(document).ready(function() { 
        $('ul#nav').superfish({ 
            delay:       500,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'slow',                          // faster animation speed 
            autoArrows:  false,                           // disable generation of arrow mark-up 
            dropShadows: false                            // disable drop shadows 
        }); 
     
	 	$("this").hoverIntent(makeTall,makeShort);
		

    });

This code allows the drop down and hover effect work as intended except for IE which stops loading JS at the missing functions for makeTall and makeShort. If I use the following code, it corrects the js error but the drop downs do not work.

$(document).ready(function() { 
        $('ul#nav').superfish({ 
            delay:       500,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'slow',                          // faster animation speed 
            autoArrows:  false,                           // disable generation of arrow mark-up 
            dropShadows: false                            // disable drop shadows 
        }); 
                function makeTall(){  $(this).animate();}
		function makeShort(){ $(this).animate({);}
	 	$("this").hoverIntent(makeTall,makeShort);
		

    });

I need some assistance with implementing the functions correctly with hoverIntent. Below is the base HTML of the navigation.

<ul id="nav">
  <li class="current"> <a href="#a">Home</a> </li>
  <li> <a href="#">Products</a>
    <ul class="products rounded5">
      <li class="current"><span>Products</span></li>
      <li class="current"> <a href="#">Service 1</a> 

        <ul class="second roundedR">
          <li class="current"><div> This is a menu item rollout</div></li>
        </ul>
      </li>
      <li> <a href="#">Service 2</a>
        <ul class="third roundedR">
          <li><a href="#">2 item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
         
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">Third item</a>
    <ul class="idTheft rounded5">
      <li class="current"><span>title</span></li>
      <li> <a href="#">subtitle</a>
        <ul class="second roundedR">
          <li><a href="#">short</a></li>
          <li><a href="#">short</a></li>
          <li><a href="#">short</a></li>
          <li><a href="#">short</a></li>
          <li><a href="#">short</a></li>
        </ul>
      </li>
      <li> <a href="#">first item</a>
        <ul class="third roundedR">
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
        </ul>
      </li>
      <li> <a href="#">second item</a>
        <ul class="fourth roundedR">
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
        </ul>
      </li>
      <li> <a href="#"> third item</a>
        <ul class="fifth roundedR">
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">FAQ</a>
    <ul class="last rounded5">
      <li class="current"><span>FAQ</span></li>
      <li> <a href="#">Reports</a>
        <ul class="second roundedR">
          <li><a href="#">short</a></li>
          <li><a href="#">short</a></li>
          <li><a href="#">short</a></li>
        </ul>
      </li>
      <li> <a href="#">Credit Scores</a>
        <ul class="third roundedR">
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
        </ul>
      </li>
      <li> <a href="#">General Questions</a>
        <ul class="fourth roundedR">
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          
        </ul>
      </li>
    </ul>
  </li>
</ul>

Any help is appreciated.

Thanks
Alan