Ich habe ein HTML-Dokument. Es sieht aus wie das:

Wenn der Benutzer das Bild "stackinfo" bewegt, soll es so aussehen:

Mein Code für das Bild:

<img src="/Resources/Images/MainMenu/logo.png" name="Logo" width="100" height="30" class="MainMenu" id="Logo" />

Ich weiß, wie man das ändertsrc des Bildes beim Hover, aber wie kann ich das animieren?

(Ich möchte es mit jQuery machen)

Was ich schon ausprobiert habe:

$(document).ready(function(){
       $('img[name="Logo"]').hover(function(event){
         $(this).fadeIn(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logoHover.png");
         });
       },
       function(event){
         $(this).fadeToggle(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logo.png");
         });  
       });
});