Jquery在悬停时动画未完成时停止排队

Question

我查看了一些帖子，并尝试放置stop（）或filter（"：not（：animatized）"）以避免在悬停时排队播放动画，但这不起作用。每次我尝试在代码中添加这些函数时，页面都不会再加载了。

<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");
       }
       );  
    });
}
});  

Answer 1

您需要简化代码并停止使用ID，因为它们在页面上必须是唯一的（如果您有多个ID，jQuery将只"看到"第一个ID）。请改用类。

您还需要决定何时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/

这并不完美，但避免了一些问题：）