Question

我检查了一些帖子并尝试将stop（）或filter（'：not（：animated）'）放在一起以避免在我的悬停上排队动画，但它不起作用。每次我尝试在我的代码中添加这些功能时，页面都不会再加载。

<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，因为它们必须在页面上是唯一的（jQuery只会＆＃34;请参阅＆＃34;如果您有多个，则为第一个）。请改用类。

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

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

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

1 个答案: