Unexpected behavior with fadeIn callback function

Unexpected behavior with fadeIn callback function

Hello everyone!

This my first post on the jQuery forum so please be gentle. Allow me to explain what I wish to do...

I have 4 images displayed in the left hand region of my webpage (they are logos for Apple, BlackBerry, Android and Windows Mobile). When the user's mouse moves over a particular logo, I want a picture of that particular platform's phone to gracefully appear on the right hand side. When the user moves their mouse to a different logo, then the original phone should gracefully disappear and be replaced by the current phone.

I thought that the best way to do this to give each of my logos an id, each of my phones an id and all the phones the same class. I thought that mouseover on logo id would trigger fadeOut on phone class with a fadeIn callback on phone id. It works creakily at best - fadeIns occur twice, often times 2 phones will be displayed simultaneously, etc... I have checked this against jQuery 1.2.6 on Firefox and Chrome. Sample code is below (for 3 of my 4 phones).

Please help because this problem has pushed me to my wit's end! Alternative solutions are also fine! Cheers!

<script type="text/javascript">
  $(document).ready(function() {
    $("#download_apple").mouseover(function() {
      $(".download_device").fadeOut("fast",function(){           
        $("#download_device_apple").fadeIn("slow")
      });
    });
    $("#download_blackberry").mouseover(function() {
      $(".download_device").fadeOut("fast",function(){   
        $("#download_device_blackberry").fadeIn("slow")
      });
    });
    $("#download_android").mouseover(function() {
      $(".download_device").fadeOut("fast",function(){            
        $("#download_device_android").fadeIn("slow")
      });
    });    
  });
</script>

<div style="float:right; width:207px; height:1000px;"><br /><br /><br />
    <img class="download_device" id="download_device_apple" style="position:absolute;" src="http://assets.fiercemarkets.com/public/mobile_apps_page/device_apple.gif"/>
    <img class="download_device" id="download_device_blackberry" style="position:absolute;" src="http://assets.fiercemarkets.com/public/mobile_apps_page/device_blackberry.gif"/>
    <img class="download_device" id="download_device_android" style="position:absolute;" src="http://assets.fiercemarkets.com/public/mobile_apps_page/device_android.gif"/>
    <img class="download_device" id="download_device_windows" style="position:absolute;" src="http://assets.fiercemarkets.com/public/mobile_apps_page/device_windows.gif"/>
</div>

<a href="" ><img id="download_apple" style="float:left;" src="http://assets.fiercemarkets.com/public/mobile_apps_page/download_small_fierceapple.jpeg"></a>
<a href="" ><img id="download_blackberry" style="float:left;" src="http://assets.fiercemarkets.com/public/mobile_apps_page/download_small_fierceblackberry.jpeg"></a>
<a href="" ><img id="download_android" style="float:left;" src="http://assets.fiercemarkets.com/public/mobile_apps_page/download_small_fierceandroid.jpeg"></a>