title: Issue in fadeIn() and fadeOut of text over images using jQuery
body: <p><strong>All this scenario is working in mobile mode when a user click on the screen then images will be shown</strong>. I have a paragraph in this paragraph I want to show images on some words. I have successfully shown images over targeted text but when a user leaves a mouse then again images will hide and text will be shown. <strong>Now I want when a user leaves a mouse then Images will hide slowly</strong>.  I have tried the below code but not successful.</p>
  
  <p>This paragraph</p>
  
  <pre><code>&lt;div class="member-detail-wrap" id="story_div"  ontouchstart="showImage()"  ontouchstart="showImage()"  ontouchend="hideImage()"&gt;                                       
   &lt;div class="sqs-block-content"&gt;
      &lt;p id="story"&gt;
        Charlie was so used to all his toys and various stuff, that he began to want something different. 
        One of his uncles found a fine &lt;span class="horse"&gt; horse &lt;/span&gt; and he gave it to Charlie, as something unusual. 
        Charlie was very excited at having a &lt;span class="horse2"&gt;horse &lt;/span&gt;. He learned to ride, and was constantly on his horse, around the &lt;span class='farm'&gt; farm &lt;/span&gt;.
  
        However, he treated the horse just as badly as he did all his other toys, 
        and it soon started looking neglected and sick. For the first time in his life, Charlie became truly worried. 
        He loved the horse, and the fact that his family had offered to swap it for a new one meant nothing to him.
     &lt;/p&gt;
   &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>This code which I have tried.</p>
  
  <pre><code>&lt;script&gt;
  function showImage()
  {
      $('.horse').html('&lt;img src="stories/hourse.jpeg" width="55" height="53"&gt;').fadeIn();
        $('.horse2').html('&lt;img src="stories/hourse.jpeg" width="65" height="53"&gt;').fadeIn();
        $('.farm').html('&lt;img src="stories/farm.jpg" width="50"&gt;').fadeIn();
  }
  function hideImage()
  {
      $('.horse').html('&lt;img src="stories/hourse.jpeg" width="55" height="53"&gt;').fadeOut(1500);
        $('.horse2').html('&lt;img src="stories/hourse.jpeg" width="65" height="53"&gt;').fadeOut(1500);
        $('.farm').html('&lt;img src="stories/farm.jpg" width="50"&gt;').fadeOut(1500);
  
      $('.horse').html('&lt;span class="horse"&gt; horse &lt;/span&gt;').fadeIn();
        $('.horse2').html('&lt;span class="horse2"&gt; horse &lt;/span&gt;').fadeIn();
        $('.farm').html('&lt;span class="farm"&gt; farm &lt;/span&gt;').fadeIn();
  
  
  }
  &lt;/script&gt;
  </code></pre>