Hello, I'm really new to jquery, started yesterday and this is my first post so please be patient with me.

I have been looking on some different tutorials and have started to create a jquery menu for a new website layout that I'm working on. What I'm trying to do is to change an image in my header when hovering over different menu items (in a normal html menu) with a fadein/fadeout effect.

I think i have been doing quite well so far and have almost got it as i want it to be on my test site located here: http://hanihatten.com/sandbox

The problem I'm having is that the hovering effect sometimes jump to 100% opaque in an instant instead of fading slowly between the images and I really don't have any idea of what is going on.

I have added this code into the header of my site:

1. <script type="text/javascript" src="http://hanihatten.com/sandbox/jquery/jquery-1.4.2.min.js"></script>
   
   <script type="text/javascript">
   $(document).ready(function(){
       $("div#h_menu li").hover(function(){
           //When we find an li element, get the ‘id’ attribute tag and save it as a variable called elid.
           var elid = $(this).attr('id');
           //We also hide the other images in the images div (with the banner images) to avoid any z-index conflicts.
           $("div#h_images div").fadeOut(2000);
   
           // if the element is currently being animated (to a fadeOut)...
           if ($("div#h_images div#" + elid + "").is(':animated')) {
                   // ...take it's current opacity back up to 1
                   $("div#h_images div#" + elid + "").fadeTo(2000, 1);
           } else {
                   // fade in
                   $("div#h_images div#" + elid + "").fadeIn(2000);
           }
       });
   });
   </script>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

And this is the HTML:

1. <img class="header-image" src="<?php Site::out_url( 'habari' ); ?>/images/header-hanihatten-v2.png" alt="Header" />
   
       <div id="h_container"> <!-- 1 -->
           <div id="h_images" class="c_h_images"> <!-- 2 -->
               <div id="h_Blogg" class="c_h_blogg" style="display:none;">
                   <img src="<?php Site::out_url( 'habari' ); ?>/images/menu-hover_blogg.png" alt="Blogg" />
               </div>
               
               <div id="h_Foto" class="c_h_foto" style="display:none;">
                   <img src="<?php Site::out_url( 'habari' ); ?>/images/menu-hover_foto.png" alt="Foto" />
               </div>
               
               <div id="h_About" class="c_h_about" style="display:none;">
                   <img src="<?php Site::out_url( 'habari' ); ?>/images/menu-hover_about.png" alt="About" />
               </div>
           </div> <!-- end h_images 2 -->
       
           <div id="h_menu" class="c_h_menu"> <!-- 3 -->
       <ul class="menu">
           <li id="h_Blogg" <?php if($request->display_home) { ?>
       class="current_page_item"<?php } ?>><a href="<?php Site::out_url( 'habari' ); ?>" title="<?php Options::out( 'title' ); ?>">Blogg</a></li>
   <?php
   // Menu tabs
   foreach ( $pages as $tab ) {
   ?>
           <li id="h_<?php echo $tab->title; ?>" <?php if(isset($post) && $post->slug == $tab->slug) { ?>
       class="current_page_item"<?php } ?>><a href="<?php echo $tab->permalink; ?>" title="<?php echo $tab->title; ?>"><?php echo $tab->title; ?></a></li>
   <?php
   }
   if ( $user instanceof User ) { ?>
           <li class="admintab"><a href="<?php Site::out_url( 'admin' ); ?>" title="<?php _e('Admin area'); ?>"><?php _e('Admin'); ?></a></li>
   <?php } ?>
       </ul>
           </div> <!-- end h_menu 3 -->
       
       </div> <!-- end h_container 1 -->