停止动画停止工作，jQuery/悬停

Stop animation stops working, jQuery/hover

本文关键字：jQuery 悬停停止工作动画更新时间：2023-09-26

我正在使用jQuery对3个不同div的背景颜色进行动画处理，重复制作3x3网格。一切都很好，除了悬停时间延长超过一秒，悬停/停止动画似乎停止工作。

如果悬停一秒钟并移出，颜色会根据需要冻结在原位。但是，长时间悬停似乎会破坏悬停/停止功能。

有人可以帮助解释在尝试同时控制多个功能时悬停/停止功能是如何工作的吗？

由于显示工作jQuery的唯一方法是通过JSfiddle，因此我在此处链接到一个工作示例：http://jsfiddle.net/Commandrea/KbLDq/3/

        function pixelColors(){
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    $('.logo').animate({
    backgroundColor: color
    }, 1000, pixelColors);
    }
    function pixelColors2(){
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    $('.logo2').animate({
    backgroundColor: color
    }, 2000, pixelColors2);
    }
    function pixelColors3(){
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    $('.logo3').animate({
    backgroundColor: color
    }, 1500, pixelColors3);
    }

    $('#logo_back').hover(
    pixelColors,
    function() {
    $('.logo').stop()
    }
    );
    $('#logo_back').hover(
    pixelColors2,
    function() {
    $('.logo2').stop()
    }
    );
    $('#logo_back').hover(
    pixelColors3,
    function() {
    $('.logo3').stop()
    }
    );

    .header {
    position: relative;
    margin: 0 auto;
    }

    #home_header {
    position: relative;
    z-index: 7;
    }
    .pixCol {
    float: left;
    height: 288px;
    margin-right: 20px;
    margin-top: 12px;
    min-height: 1px;
    padding-left: 15px;
    width: 227px;
    }

    #pixelBox {
    left: 14px;
    position: relative;
    top: 20px;
    }
    .logo {
    height: 69px;
    width: 69px;
    z-index: 8;
    background-color:#9C3;
    display:inline-block;
    float:left;
    background-color:#F60;
    }

    .logo2 {
    height: 69px;
    width: 69px;
    z-index: 8;
    background-color:#9C3;
    display:inline-block;
    float:left;
    background-color:#F90;
    }
    .logo3 {
    height: 69px;
    width: 69px;
    z-index: 8;
    background-color:#9C3;
    display:inline-block;
    float:left;
    background-color:#F33;
    }
    .logo_back{
    background:none;
    height: 220px;
    margin-top: 51px;
    position: absolute;
    width: 229px;
    z-index: 9;
    }
    .logo_back2 {
    background: url("images/logo/batterEmpty.png") no-repeat scroll 0 0 transparent;
    height: 220px;
    margin-top: 51px;
    position: absolute;
    width: 229px;
    z-index: 9;
    }
    

    <div class="header">
    <div class="pixCol">
    <div id="home_header">
    <div id="logo_back" class="logo_back"></div>
    <div id="pixelBox">
    <div class="logo"></div>
    <div class="logo2"></div>
    <div class="logo3"></div>
    <div class="logo3"></div>
    <div class="logo"></div>
    <div class="logo2"></div>
    <div class="logo2"></div>
    <div class="logo3"></div>
    <div class="logo"></div>
    </div>
    </div>
    </div>
    </div>

您可以使用一个悬停事件而不是三个，并且已经知道stop(true)可以解决问题

 $('#logo_back').hover(
     function(){
         pixelColors();
         pixelColors2();
         pixelColors3();
     },
    function() {
        $('.logo, .logo2, .logo3').stop(true);
    }
);

演示。

~~我对你的代码很困惑，你为什么要同时启动 3 个动画？~~ [编辑：哦，我看到它们在不同的元素上] 无论如何，这就是为什么它不会停止 - 您还必须调用stop(true)来停止排队的动画，并且由于您不断同时触发 3 个动画，因此队列中有很多动画。只要通过真，你的小提琴工作正常。