[jQuery] Help with a menu transition effect please

[Major_Disaster]

Hello all,

Im currently working on a new website and a new drop down menu using this tutorial

So far, this is what i have. It all seems to be working OK so far, but i dont like the fade transition its using. I would prefer something more like on the Nvidia site where there isnt a "fade lag".

I tried to use jQuery's FadeIn transition instead of the current fadeTo - but it just seemed to break the whole menu. So, how do i go about changing the transition effects (and trying some out), simply copying and pasting over the current fadeTo doesnt seem to work?

Thanks for any help

This is the code:

<script type="text/javascript">
$(document).ready(function() {
   
    function megaHoverOver(){
        $(this).find(".sub").stop().fadeTo('fast', 1).show();
       
        //Calculate width of all ul's
        (function($) {
            jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
                $(this).find("ul").each(function() {                   
                    rowWidth += $(this).width();
                });   
            };
        })(jQuery);
       
        if ( $(this).find(".row").length > 0 ) { //If row exists...
            var biggestRow = 0;   
            //Calculate each row
            $(this).find(".row").each(function() {                             
                $(this).calcSubWidth();
                //Find biggest row
                if(rowWidth > biggestRow) {
                    biggestRow = rowWidth;
                }
            });
            //Set width
            $(this).find(".sub").css({'width' :biggestRow});
            $(this).find(".row:last").css({'margin':'0'});
           
        } else { //If row does not exist...           
            //Set Width
    $(this).calcSubWidth();

    var o = $(this).find('.sub').offset();
    var p = $('#megaMenu').offset();
    var pw = document.getElementById('megaMenu').clientWidth;
    var tw = rowWidth;
    o.left = o.left - p.left;
    var tml = (tw + o.left) - pw;
   
    $(this).find(".sub").css({'width' : rowWidth}).css({'margin-left':'-' + tml - 20 + 'px'});
        }
    }
   
    function megaHoverOut(){
     $(this).find(".sub").stop().fadeTo('fast', 0, function() {
         $(this).css({'margin-left':'0'});
    $(this).hide();
     });
    }

    var config = {   
         sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)   
         interval: 100, // number = milliseconds for onMouseOver polling interval   
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)   
         timeout: 500, // number = milliseconds delay before onMouseOut   
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)   
    };   

    $("ul#topnav li .sub").css({'opacity':'0'});
    $("ul#topnav li").hoverIntent(config);
});
</script>

 

[Major_Disaster]

After scanning through your post, I was struggling to find the .js file that was making those menus in the examples and then i realised it was pure CSS - pretty impressive. Thanks a lot for the link - ill spend some time playing around with them