jQuery .hover 和 .mouseleave 意外循环。我该如何解决

Question

我想做什么：

将鼠标悬停在图像上，图像淡出。
文本在图像淡出后淡入。
文本随鼠标离开淡出。
原图淡入。
以原始图片结束，不显示文字

问题：

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

$("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 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/

jQuery .hover 和 .mouseleave 意外循环。我该如何解决

jQuery .hover and .mouseleave Unintentional looping. How do I fix

html

javascript

css

jquery

image