title: Add fade-effect to mouseover jQuery
body: <p>I'm new to jQuery and trying out this code for swapping an image on mouseover.</p>
  
  <pre><code>$("#Mr1").on({
   "mouseover" : function() {
      this.src = 'design/images/11.png';
    },
    "mouseout" : function() {
      this.src='design/images/10.png';
    }
  });
  </code></pre>
  
  <p>The code works perfectly fine, but I would like to add a fade effect when the images swap. I tried adding parts to the code in order to make this work but then the code always stops working. Could someone give me a hand?</p>