jquery - 使用 jQuery 在图像上淡入（）和淡出文本的问题

Question

当用户单击屏幕时，所有这些场景都在移动模式下工作，然后将显示图像。我在这一段中有一段我想在一些单词上显示图像。我已经成功地在目标文本上显示了图像，但是当用户离开鼠标时，图像将再次隐藏并显示文本。现在我想当用户离开鼠标时，图像会慢慢隐藏。我尝试了下面的代码，但没有成功。

本段

<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>

我试过的这段代码。

<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>

标签： jquery

Answer 1

因为您在图像完全淡出之前将其更改为文本。所以要让它工作，你只需要添加一个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)
}