jQuery: image gallery with drop

My next jQuery project will be all about the remake of a Flash-driven web site of a company. This web site features an image gallery where each image set is displayed on several columns, each one with a progressive number. The gallery first appears as empty and then each image set is displayed on its corresponding column when you hovers the column itself. When you move your mouse from the column, the image set disappears and so on. The effect is much similar to the jQuery UI drop effect applied to the hide() and show() methods, so I've created a demo for that purpose. First, our markup:

<div id="gallery">
 <div class="wrapper">
  <h4>1</h4>
  <!--images here-->
 </div>
 <!--other image wrappers-->
</div>

We have to create several columns here, so we're going to use CSS floats for that purpose:

body {
 margin: 0;
 padding: 2em;
 font: 100% 'Arial Narrow', Arial, sans-serif;
}

#gallery {
 width: 404px;
 height: 100%;
 overflow: hidden;
}

div.wrapper {
 width: 100px;
 border-right: 1px solid;
 float: left;
 height: 300px;
}

div.wrapper h4 {
 margin: 0;
 padding-bottom: 10px;
 text-align: center;
 font-size: 1em;
 font-weight: bold;
}

div.wrapper img {
 display: block;
 width: 90px;
 height: 60px;
 margin: 0 auto;
}

div.last {
 border: none;
}

Our jQuery code will simply use the mouseenter and mouseleave events to show and hide our image sets:

$(function() {

  $('div', 'div.wrapper').css('display', 'none');
  
  $('div.wrapper', '#gallery').each(function() {
  
    var $div = $(this);
    $div.mouseenter(function() {
    
      $div.find('div').stop(true, true).
      show('drop',
      {
        
        direction: 'left'
      },
      
      400);
      
    });
    
    $div.mouseleave(function() {
    
    
      $div.find('div').stop(true, true).
      hide('drop',
      {
        direction: 'right'
        
      },
      
      400);
      
      
    
    
    });
    
   
  
  
  });

});

You can see the demo below.

Demo

Live demo