CODEWITHSUNDEEP
jquery
Salman Iqbal
Salman Iqbal

Reputation: 442

Issue in fadeIn() and fadeOut of text over images using jQuery

All this scenario is working in mobile mode when a user click on the screen then images will be shown. 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. Now I want when a user leaves a mouse then Images will hide slowly. I have tried the below code but not successful.

This paragraph

<div class="member-detail-wrap" id="story_div"  ontouchstart="showImage()"  ontouchstart="showImage()"  ontouchend="hideImage()">                                       
 <div class="sqs-block-content">
    <p id="story">
      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 <span class="horse"> horse </span> and he gave it to Charlie, as something unusual. 
      Charlie was very excited at having a <span class="horse2">horse </span>. He learned to ride, and was constantly on his horse, around the <span class='farm'> farm </span>.

      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.
   </p>
 </div>  
</div>

This code which I have tried.

<script>
function showImage()
{
    $('.horse').html('<img src="stories/hourse.jpeg" width="55" height="53">').fadeIn();
      $('.horse2').html('<img src="stories/hourse.jpeg" width="65" height="53">').fadeIn();
      $('.farm').html('<img src="stories/farm.jpg" width="50">').fadeIn();
}
function hideImage()
{
    $('.horse').html('<img src="stories/hourse.jpeg" width="55" height="53">').fadeOut(1500);
      $('.horse2').html('<img src="stories/hourse.jpeg" width="65" height="53">').fadeOut(1500);
      $('.farm').html('<img src="stories/farm.jpg" width="50">').fadeOut(1500);

    $('.horse').html('<span class="horse"> horse </span>').fadeIn();
      $('.horse2').html('<span class="horse2"> horse </span>').fadeIn();
      $('.farm').html('<span class="farm"> farm </span>').fadeIn();


}
</script>

Upvotes: 0

Views: 32

Answers (2)

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

Not sure if I understood what your problem is but this might help. And also remember. Your html fade in have to wait for the fade out to complete other wise it wont let fade out do its job.

<script>
function showImage()
{
    $('.horse').html('<img class="horseimage" src="stories/hourse.jpeg" width="55" height="53">').fadeIn();
      $('.horse2').html('<img class="horseimage2" src="stories/hourse.jpeg" width="65" height="53">').fadeIn();
      $('.farm').html('<img class="farmimage" src="stories/farm.jpg" width="50">').fadeIn();
}
function hideImage()
{
    $('.horseimage').fadeOut(1500);
      $('.horseimage2').fadeOut(1500);
      $('.farmimage').fadeOut(1500);

setTimeout(function(){
    $('.horse').html('<span class="horse"> horse </span>').fadeIn();
      $('.horse2').html('<span class="horse2"> horse </span>').fadeIn();
      $('.farm').html('<span class="farm"> farm </span>').fadeIn();
}, 1500);

}
</script>

Upvotes: 0

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

Because you change the image to text before it completely fade out. So to make it work, you just need to add a setTimeout:

function hideImage() {
  $('.horse').fadeOut(1500);
  $('.horse2').fadeOut(1500);
  $('.farm').fadeOut(1500);
  setTimeout(function(){
    $('.horse').html('<span class="horse"> horse </span>').fadeIn();
    $('.horse2').html('<span class="horse2"> horse </span>').fadeIn();
    $('.farm').html('<span class="farm"> farm </span>').fadeIn();
  },1500)
}

Upvotes: 1

Related Questions