如何停止fadeIn（）閃爍？

目前我有一個簡單的div，我想淡入另一個div的mouseover，但它會閃爍3次。如何停止fadeIn（）閃爍？

我讀過一些其他問題，我認爲這與我的代碼結構有關。但我不知道如何糾正我的問題，因爲它已經很基礎了。

這裏是我的代碼：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.content .guide ul.guide li .event').mouseover(function(){ 
      $(this).find('.info').fadeIn(); 
     }); 
     $('.content .guide ul.guide li .event').mouseout(function(){ 
      $(this).find('.info').fadeOut(); 
     }); 
    }); 
</script>

CSS

.content .guide ul.guide li .event .info {display:none;}

HTML

<ul class="guide"> 
    <li class="mon"> 
     <div class="day">Monday</div> 
     <div class="session-1 event"> 
      <time>7:30am</time> 
      <span>Ep 5: <a href="">Lorem</a></span> 
      <div class="info"> 
       <div class="tooltip"></div> 
       <div class="wrap"> 
        <div class="desc">Ep 8: Lorem ipsum</div> 
       </div> 
      </div> 
     </div> 
     <div class="session-2 event"> 
      <time>8:30pm</time> 
      <span>Ep 5: <a href="">Lorem</a></span> 
      <div class="info"> 
       <div class="tooltip"></div> 
       <div class="wrap"> 
        <div class="desc">Ep 8: Lorem ipsum</div> 
       </div> 
      </div> 
     </div> 
    </li> 
    <li class="tue"> 
     <div class="day">Tuesday</div> 
     <div class="session-1"> 
     </div> 
     <div class="session-2"> 
     </div> 
    </li> 
</ul>

來源

2012-06-05 muudless

不相關的問題，但要注意你應該鏈接你的'mouseover'和'mouseout'方法來避免兩次創建相同的jQuery對象：'$（'。content .guide ul.guide li .event'）。mouseover（function（）{...}） .mouseout（function（）{...}）;' – nnnnnn

您可以使用stop().fadeTo()防止。請參見下面的代碼和demo here

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.content .guide ul.guide li .event').mouseover(function(){ 
      $(this).find('.info').stop().fadeTo('slow',1); 
     }); 
     $('.content .guide ul.guide li .event').mouseout(function(){ 
      $(this).find('.info').stop().fadeTo('slow',0); 
     }); 
    }); 
</script>

來源

2012-06-05 02:25:27 Dips

只需注意'fadeTo'沒什麼特別的，所有的魔法都在'stop'：'.stop（）。fade在（）'和'.stop（）。fadeOut（）'也可以。 – Amadan

我正要給出同樣的答案。這裏是我爲它創建的小提琴：http://jsfiddle.net/MnwTN/請注意，您可能需要'.stop（true，true）'（否則，取決於您如何操縱鼠標，您可能會得到元素即使你還在結束它也會消失）。如果你解釋_why_這會修復一些事情，我會給你一個+1 ... – nnnnnn

@nnnnnn工作奇蹟謝謝 – muudless

我只在谷歌瀏覽器這樣的麻煩。將「.fadeIn」更改爲「.fadeTo（myDuration，1）」。對於我來說，沒有「.stop（）」就可以正常工作。

來源

2013-02-18 21:56:11 it3xl

老問題，但我想在對抗這個問題之後添加我的發現，以防他們對任何人都有幫助。

使用stop（）。fadeIn（）時，它只會暫停操作，直到觸發下一個操作。然後，我嘗試完成（），fadeIn（）和finish（）。fadeOut（），而不是停止（）。這工作好多了。當前正在進行的動畫立即完成，電流開始。

對於上面的例子，那就是：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.content .guide ul.guide li .event').mouseover(function(){ 
      $(this).find('.info').finish().fadeTo('slow',1); 
     }); 
     $('.content .guide ul.guide li .event').mouseout(function(){ 
      $(this).find('.info').finish().fadeTo('slow',0); 
     }); 
    }); 
</script>

來源

2013-12-29 22:22:03 Tiago

我有這個，這解決了我的問題（我用的是淡入和淡出）

$("#board").stop().animate({ "opacity": 1 },300);

來源

2015-02-20 13:32:03 Mikeys4u

這對我有用！謝謝。 – Fushniki

如何停止fadeIn（）閃爍？

回答

相關問題