jquery停止排隊而動畫沒有完成懸停

我檢查了幾個帖子，並試圖把停止（）或過濾器（'：不（（：動畫）'），以避免在我的懸停排隊動畫，但它doesn沒有工作。每次我嘗試在代碼中添加這些函數時，該頁面將不會再加載。jquery停止排隊而動畫沒有完成懸停

<div id="competences"> 
    <div id="logoComp"> 
     <div> 
      <img id="devLogo" src="img/logoDev.png" /> 
      <p>Developpement</p> 
      <p>- HTML/CSS -</br> 
      - Javascript -</br> 
      - PHP -</br> 
      - Java -</p> 
      </div> 
      <div> 
       <img id="responsiveLogo" src="img/responsive.png" /> 
       <p>Responsive</p> 
       <p>Ce site est responsive et la plupart de mes projets le sont également.</p> 
      </div> 
      <div> 
       <img id="logoPrint" src="img/logoPrint.png" /> 
       <p>Graphisme</p> 
       <p>Photoshop, Illustrator, InDesign, Blender, After Effects, Premiere</p> 
      </div> 
     </div> 
    </div>

代碼：

$(document).ready(function() { 

// when hover over the selected image change the opacity to 1 
    var n = $("#competences").length; 

    for(i=0; i<n; i++){ 
     $('#logoComp div').each(function(){ 
     $(this).hover( 
     function(){ 
      $(this).find('img').hide("slow"); 
      $(this).find('p').delay(500).show("slow"); 

     }, 
     function(){ 
      $(this).find('p').hide("hide"); 
      $(this).find('img').delay(500).show("slow"); 
     } 
     ); 
    }); 
} 
});

來源

2014-09-19 Malane

爲什麼你一）添加處理程序'（jQuery不需要這樣做）和b）在一個循環中執行它（不止一次添加處理程序！） – 2014-09-19 15:58:19

也是唯一的，所以你只能迭代一次，無論頁面上有多少？ – 2014-09-19 16:00:45

你需要簡化你的代碼並停止使用標識，因爲他們必須在一個網頁上是唯一的（jQuery的只有「看到」的第一個，如果你有倍數）。改用類。

您還需要決定何時stop()現有的動畫或他們將鏈接在一起。 stop()刷新該元素的動畫隊列：

$(document).ready(function() { 

    // when hover over the selected image change the opacity to 1 
    $(".competences .logoComp div").hover(
    function() { 
     $(this).find('img').stop().hide("slow"); 
     $(this).find('p').stop().delay(500).show("slow"); 

    }, 
    function() { 
     $(this).find('p').stop()hide("hide"); 
     $(this).find('img').stop().delay(500).show("slow"); 
    }); 
});

的jsfiddle：http://jsfiddle.net/zymje5Lq/1/

這是不完美的，但避免了在`每個出現的一些問題:)

來源

2014-09-19 16:05:51

當我嘗試您的代碼時，我的頁面將不會再加載。 – Malane 2014-09-23 08:44:31

哦nvm沒有看到你忘了。停止（）後。現在的問題是我的動畫中途停下來，而我的img不再重新出現，而是隱藏起來。 – Malane 2014-09-23 08:54:10

jquery停止排隊而動畫沒有完成懸停

回答

相關問題