Swapped image cut in half

Swapped image cut in half

Hi

I'm new to jquery and ran into a problem I just can't figure out how to solve..

I'm building a little website for a friend of mine. On the Team-page i'd like to swap the standard headerimage with an animated gif of the person, by hovering over the persons name.
So far it all works just fine, with one "little" problem.
The first time i hover over a link, the animated gif is loaded, but cut in half and only the top half of the image plays the animation. Since this might not make any sense you can take a look at the site right here.

The funny thing is, the second time i hover over the same name, the image shows up just fine..

Has someone of you ever encountered something like that?

This is the script i'm using:
  1. $(function(){
  2.     $(".link1").mouseover( function(){
  3.         $('.imagefield').attr('src', '/drupal/sites/default/files/link1.gif');
  4.         $('.imagefield').attr('height', '350');
  5.     });
  6.     $(".link2").mouseover( function(){
  7.         $('.imagefield').attr('src', '/drupal/sites/default/files/link2.gif');
  8.         $('.imagefield').attr('height', '350');
  9.     });
  10.     $(".imagefieldlink").mouseout( function(){
  11.         $('.imagefield').attr('src', 'http://www.orthomeier.ch/drupal/sites/default/files/Blume.jpg');
  12.         $('.imagefield').attr('height', '500');
  13.     });
  14. });
  1. <img class="imagefield imagefield-field_image" src"headerimage.jpg" />
  2. <a href="#" class="link1">link1</a>
  3. <a href="#" class="link2">link2</a>
At first i thought it might be the images, but i tested it with other animated gifs too, with the same result..

Thanks a lot for your help