jQuery.hooper和.mouseleve意外循环.我该如何修复

Question

我想做的事情：

1. 将鼠标悬停在图像上，图像将淡出
2. 图像淡出后文本淡入
3. 文本随鼠标离开而淡出
4. 原始图像淡入
5. 以原始图像结束，不显示文本

问题：

我有一些步骤在工作，但它们似乎一直在循环，显示图像和文本闪烁。有什么建议吗？

$("img").hover(function(){
    $(this).fadeOut();
    $("p").text("CHAIR").fadeIn(); 
});
$("p").mouseleave(function(){
    $("p").fadeOut();
    $("img").fadeIn("slow");
});

p {
   display: none;
   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>
<img id="chair" src="http://edufurniture.com/images/catalog/category13.jpg" alt="">
<p></p>

jsfiddle步骤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/