// when the DOM is ready:

$(document).ready(
    function() {
  // find the div.fade elements and hook the hover event
        $('img.fade').hover(
            function() { 
                var image = $(this);
                if(image.is(":animated")){
                    image.stop().fadeTo(250,0);
                } else {
                    image.fadeTo(250,0);
                }
            }, 
            function(){
                var image = $(this);
                if(image.is(":animated")){
                    image.stop().fadeTo(250,1);
                } else {
                    image.fadeTo(250,1);
                }
            });
            
        $('.submenuitem>a').hover(
            function() { 
                var image = $(this).parents("span:first").children("span.fade");
                if(image.is(":animated")){
                    image.stop().fadeTo(250,0);
                } else {
                    image.fadeTo(250,0);
                }
                $(this).addClass("white");
            }, 
            function(){
                var image = $(this).parents("span:first").children("span.fade");
                if(image.is(":animated")){
                    image.stop().fadeTo(250,1);
                } else {
                    image.fadeTo(250,1);
                }
                $(this).removeClass("white");

            });
        
    
    }
);