Jquery/Javascript thumbnail image problem

I have several thumbnail images that are spaced (with margin) 5 pixels apart in html list tags. I also have Jquery listeners for their mouseenter and mouseleave events that update a parent image according to whichever thumbnail is being rolled over.

If you scroll from one thum开发者_StackOverflow中文版bnail image to another, the transition is not smooth. When the mouse is in the 5 pixel spacing, the parent image jumps quickly to its default value then back to the next thumbnail when the cursor moves over it.

How can I make this smooth so it goes from image to image without jumping back to default parent image.

I've tried making the spacing as padding, but the design has a border around the images and this makes it look bad.

Thanks!

EDIT. - > code request

$image_changer = $('.imageChanger');
$image_changer.each(function(){
$(this).mouseenter(function(){
    $backup_old_image = $('.product-img-box .product-image img').attr('src');
    $('.product-img-box .product-image img').attr('src', $(this).attr('src'));
});
});
$image_changer.mouseleave(function(){
    $('.product-img-box .product-image img').attr('src', $backup_old_image);
});

Example on product page.. http://www.greencupboards.com/loyal-luxe-the-canadian-cabin-15706.html

use a wrapper or place the padding and mouseover event triggers on the li element

<li style="padding:5px">
   <img href="content.png" alt="content">
</li>

$("li").hover(function(){},function(){})

Edit

After seeing the site:

change

#main-content .more-views ul li {
  float: left;
}

to

#main-content .more-views ul li {
  padding-right: 5px;
  float: left;
}

and get rid of the margin-right on the images.

then change the jQuery to

$image_changer = jQuery('.more-views li');
$image_changer.each(function(){
jQuery(this).mouseenter(function(){
    $backup_old_image = jQuery('.product-img-box .product-image img').attr('src');
    jQuery('.product-img-box .product-image img').attr('src', jQuery(this).find("img").attr('src'));
});
});
$image_changer.mouseleave(function(){
    jQuery('.product-img-box .product-image img').attr('src', $backup_old_image);
});