Jquery/JS css动画在悬停时工作错误

我正在尝试让屏幕上的一些点动画化，它们应该在悬停时停止。

代码:

function dot(_options) {
    this.id = _options.id;
    this.speedX = 0;
    this.speedY = 0;
    this.posx = _options.posx;
    this.posy = _options.posy;
    this.width;
    this.height;
    this.animation = true;
};
dot.prototype.animationStep = function() {
    if(this.animation == true) {
        while (this.speedX == 0)
            this.speedX = randPos(-3, 3);
        while (this.speedY == 0)
            this.speedY = randPos(-3, 3);
    if (this.posx + this.speedX <= 0 || this.posx + this.speedX + this.width >= $(window).width()-2){
            if(this.speedX < 0){
                 this.speedX = randPos(1.5, 3);
            } 
            else {
                 this.speedX = randPos(-1.5, -3);
            }
        }
    if (this.posy + this.speedY <= 0 || this.posy + this.speedY + this.height >= $(window).height()-85){
            if(this.speedY < 0){
                 this.speedY = randPos(1, 3);
            } 
            else {
                 this.speedY = randPos(-1, -3);
            }
        }
        this.posx += this.speedX;
        this.posy += this.speedY;
        this.width = $('#dot' + this.id).width();
        this.height = $('#dot' + this.id).height();
        $('#dot' + this.id).parent().css({
            'left': this.posx + 'px',
            'top': this.posy + 'px'
        });
        
        // $('#dot' + this.id).html(this.speedX + ' / ' + this.speedY);
    }
}
dot.prototype.pause = function(){
    this.speedX = 0;
    this.speedY = 0;
}
dot.prototype.unpause = function() {
    while (this.speedX == 0)
        this.speedX = randPos(-3, 3);
    while (this.speedY == 0)
        this.speedY = randPos(-3, 3);
}
var dots = [];
dots.push(new dot({
    id: 1,
    posx: 100,
    posy: 100
}));
dots.push(new dot({
    id: 2,
    posx: 100,
    posy: 100
}));
dots.push(new dot({
    id: 3,
    posx: 100,
    posy: 100
}));
dots.push(new dot({
    id: 4,
    posx: 100,
    posy: 100
}));
dots.push(new dot({
    id: 5,
    posx: 100,
    posy: 100
}));
dots.push(new dot({
    id: 6,
    posx: 100,
    posy: 100
}));
window.setInterval(function() {
    for (var i = 0; i < dots.length; i++) {
        dots[i].animationStep();
    }
}, 16);
function randPos(max, min) {
    return (Math.random() * (max - min + 1)) + min;
}
 
$(document).ready(function(){
    $('.dot').hover(
        function(){
            var dataid = $('div', this).attr('data-id');
            dots[dataid-1].animation=false;
            
        },
        function(){
            var dataid = $('div', this).attr('data-id');
            dots[dataid-1].animation=true;
        });
    $('.dot div').hover(
        function(){
            var dataid = $(this).attr('data-id');
            dots[dataid-1].animation=false;
            
        },
        function(){
            var dataid = $(this).attr('data-id');
            dots[dataid-1].animation=true;
        });
        $('.div2').hover(
        function(){
            var dataid = $(this).attr('data-id');
            dots[dataid-1].animation=false;
            
        },
        function(){
            var dataid = $(this).attr('data-id');
            dots[dataid-1].animation=true;
        });
        $('.color').hover(
        function(){
            var dataid = $(this).attr('data-id');
            dots[dataid-1].animation=false;
            
        },
        function(){
            var dataid = $(this).attr('data-id');
            dots[dataid-1].animation=true;
        });
});

在Firefox和Safari(Windows)中，它可以正常工作。这里只有一个小的影响，点飞离光标。但在Chrome、IE和Safari(Mac)中，你无法捕捉到光标前面飞了很远的点，我不知道为什么。

我希望你们中的一些人能帮助我。

这是我的小提琴

非常感谢!