jQuery .hover和.mouseleave无意的循环。我该如何解决？

Question

我想做的事情：

1. 将鼠标悬停在图片上方时，图片淡出。
2. 文字淡出后图像淡出。
3. 使用鼠标离开文字淡出。
4. 原始图片淡入。
5. 以原始图片结束，未显示任何文字

问题：

我已经完成了步骤，但它们似乎一直在循环，显示图像和文本闪烁。有什么建议吗？

＆＃13;
＆＃13;
$("img").hover(function(){
    $(this).fadeOut();
    $("p").text("CHAIR").fadeIn(); 
});

$("p").mouseleave(function(){
    $("p").fadeOut();
    $("img").fadeIn("slow");
});
＆＃13;
p {
   display: none;
   position: absolute;  
   left: 100px;
   top: 150px;
   font-size:45px;   
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="chair" src="http://edufurniture.com/images/catalog/category13.jpg" alt="">
<p></p>
＆＃13;
＆＃13;
＆＃13;

jsfiddle example of steps 1 - 4

Answer 1

试试这个

  $(".foo").hover(
  function() {
    $('img',this).stop().fadeOut();
        $("p",this).text("CHAIR").stop().fadeIn();
  }, function() {
    $('img',this).stop().fadeIn();
        $("p",this).text("CHAIR").stop().fadeOut();
  }
);


.foo {
    width:250px;
    height:250px;
}
p {

   position: absolute;  
   left: 100px;
   top: 150px;
   font-size:45px;   
   }


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class="foo"> <img id="chair" src="http://edufurniture.com/images/catalog/category13.jpg" alt="">
    <p></p>
    </div>

http://jsfiddle.net/L1ye4y1j/9/