Jquery/JS css animation works wrong on hover

Question

I am trying to animate some dots all over the screen and they should stop on hover.

The code:

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;
        });
});

In Firefox and Safari(Windows), it works acceptable. Here is only a little effect, that the dots flying away from the cursor. But in Chrome, IE and Safari(Mac) you can't catch the dots they flying a big distance in front of the cursor, and I don't know why.

I hope some of you guys could help me.

here is my fiddle

Thanks a lot!

In Chrome it seems to work for me, but it doesn't have the nice fluid movement which Firefox has. Just an observation I thought I'd add. — AndrewPolland
– AndrewPolland, Commented Jul 17, 2014 at 8:38
yes thanks for your comment. Which version of Chrome do you have? i can't adjust it. — GoE
– GoE, Commented Jul 17, 2014 at 8:46
Pretty Interesting Code, nice work, now here after analyzing your code, I can say you need to restrict the dots[i].animationStep(); with if element has focus will not animate, .. that tricks the functioning.. — MarmiK
– MarmiK, Commented Jul 17, 2014 at 11:19
Thanks a lot, but i don't quite understand what you mean exactly. Can you explain it more detailed and use some code snippets? — GoE
– GoE, Commented Jul 17, 2014 at 13:34

GoE · Accepted Answer · 2014-07-18 11:40:13Z

1

I solved it. I added a transition: 0.3s to my a in css. That gives me the error, that specially interferes chrome an mac safari.

answered Jul 18, 2014 at 11:40

GoE

5961 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery/JS css animation works wrong on hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related