Javascript 如何防止使用CSS关键帧设置动画的div发生碰撞

我如何防止一个

div

的

top

位置使用CSS关键帧设置动画，而另一个

div

也使用Javascript中的相同关键帧设置动画？我想“暂停”关键帧，稍等一下

（1s？

，然后重新启动它。
我已经编写了检测碰撞的代码，但是如何暂停关键帧（跨浏览器）？那么，我怎样才能重新开始呢

关键帧：

@keyframes moveItUp {
    10% {
        top: 18%;
    }
    20% {
        top: 16%;
    }
    30% {
        top: 14%;
    }
    40% {
        top: 12%;
    }
    50% {
        top: 10%;
    }
    60% {
        top: 8%;
    }
    70% {
        top: 6%;
    }
    80% {
        top: 4%;
    }
    90% {
        top: 2%;
    }
    100% {
        top: -20px;
    }
}

检查两个div的冲突：

jQuery.fn.collision = function($div2) {
    $div1  = $(this);
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;
};

jQuery.fn.collision=函数（$div2）{
$div1=$（此项）；
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | r1r2）返回false；
返回true；
};

---

以下是关键帧碰撞代码的演示：

关键是当检测到碰撞时，将

动画播放状态设置为
暂停
，然后在所需时间后（使用
设置超时
）将其重新设置为
运行

需要注意的另一件事是，碰撞检查必须在两个元素都添加了动画之后进行，因为否则将没有动画可设置播放状态。或者，我们也可以在检测到碰撞时检查元素上是否存在动画，并将
动画播放状态
设置为
暂停
（如果存在动画）


jQuery.fn.collision=函数（$div2）{
$div1=$（此项）；
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | r1r2）返回false；
返回true；
};
函数tryCollision（）{
$（'.test123'）.css（'animation'，'moveItUp 10s'）；
setTimeout（函数（）{
$（'.test321'）.css（'animation'，'moveItUp 10s'）；
var int=setInterval（函数（）{
var res=$（'.test321'）。冲突（$（'.test123'））；
如果（res==true）{
$（'body'）.append（'需要停止.test321的关键帧，然后在1s后继续）；
/*将动画的状态设置为“暂停”*/
$（'.test321'）.css（'animation-play-state'，'paused'）；
/*经过所需的时间后，将其设置回运行状态*/
setTimeout（函数（）{
$（'.test321'）.css（'animation-play-state'，'running'））
}, 2500);
清除间隔（int）；
}
}, 1);
}, 500);
}
@keyframes moveItUp{
10% {
最高：18%；
}
20% {
最高：16%；
}
30% {
最高：14%；
}
40% {
最高：12%；
}
50% {
排名前10%；
}
60% {
最高：8%；
}
70% {
最高：6%；
}
80% {
最高：4%；
}
90% {
最高：2%；
}
100% {
顶部：-20px；
}
}
.test123，
.测试321{
位置：绝对位置；
最高：20%；
宽度：90%；
左：10px；
}
.test123{
背景：#000；
}
.测试321{
背景：黄色；
}
钮扣{
位置：绝对位置；
最高：25%；
}
p{
位置：绝对位置；
最高：30%；
}

A.
A.
尝试碰撞
关键是在检测到碰撞时将
动画播放状态
设置为
暂停
，然后在所需时间后（使用
设置超时
）再次将其设置回
运行状态

需要注意的另一件事是，碰撞检查必须在两个元素都添加了动画之后进行，因为否则将没有动画可设置播放状态。或者，我们也可以在检测到碰撞时检查元素上是否存在动画，并将
动画播放状态
设置为
暂停
（如果存在动画）


jQuery.fn.collision=函数（$div2）{
$div1=$（此项）；
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | r1r2）返回false；
返回true；
};
函数tryCollision（）{
$（'.test123'）.css（'animation'，'moveItUp 10s'）；
setTimeout（函数（）{
$（'.test321'）.css（'animation'，'moveItUp 10s'）；
var int=setInterval（函数（）{
var res=$（'.test321'）。冲突（$（'.test123'））；
如果（res==true）{
$（'body'）.append（'需要停止.test321的关键帧，然后在1s后继续）；
/*将动画的状态设置为“暂停”*/
$（'.test321'）.css（'animation-play-state'，'paused'）；
/*经过所需的时间后，将其设置回运行状态*/
setTimeout（函数（）{
$（'.test321'）.css（'animation-play-state'，'running'））
}, 2500);
清除间隔（int）；
}
}, 1);
}, 500);
}
@keyframes moveItUp{
10% {
最高：18%；
}
20% {
最高：16%；
}
30% {
最高：14%；
}
40% {
最高：12%；
}
50% {
排名前10%；
}
60% {
最高：8%；
}
70% {
最高：6%；
}
80% {
最高：4%；
}
90% {
最高：2%；
}
100% {
顶部：-20px；
}
}
.test123，
.测试321{
位置：绝对位置；
最高：20%；
宽度：90%；
左：10px；
}
.test123{
背景：#000；
}
.测试321{
美国银行