javascript - 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）中，您无法捕捉到它们在光标前面飞了很远的点，我也不知道为什么。

我希望你们中的一些可以帮助我。

这是我的fiddle

非常感谢！

最佳答案

我解决了我在CSS中添加了transition: 0.3s。这给了我错误，特别是干扰了chrome mac safari。

关于javascript - jQuery/JS CSS动画在悬停时工作错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24798475/