Can't change css in Jquery when using a variable to reference an index of an array

Question

var bubble = [$('#bubble1'), $('#bubble2'), $('#bubble3'), $('#bubble4'), $('#bubble5'), $('#bubble6')];
var bubbleFirst = 0;
var visibleBubbles = 3;
var bubbleHeight = 200;
var bubbleTimeDelay = 5000;

var bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay/2);

function animateBubbles(){
    clearTimeout(bubbleTimer);//stop from looping before this is finished

    for(var i = 0; i < visibleBubbles + 1; i++){
        count = i + bubbleFirst;
        if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
        bubble[count].animate({top:'-=' + bubbleHeight}, 2000);
    }
    bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom
    //resetBubbles();
    bubbleFirst++;
    if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
    bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);//start looping again
}

bubble1 starts with top: 0px;
bubble2 starts with top: 200px;
bubble3 starts with top: 400px;
bubble4-6 start with top: 600px;
all are position: absolute in a wrapper div

Apologies for the code dump. My problems are all centered around line 16:

bubble[bubbleFirst].css('top', '600px');

This code is seemingly never executed, there is no error in my console and I have verified that bubble[bubbleFirst] is returning the correct element using console.log. (It's a div)

I'm currently using a workaround, but it is not dynamic:

function resetBubbles(){
    /*bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom*/
    if(bubble[0].css('top') == '-200px') bubble[0].css('top', '600px');
    if(bubble[1].css('top') == '-200px') bubble[1].css('top', '600px');
    if(bubble[2].css('top') == '-200px') bubble[2].css('top', '600px');
    if(bubble[3].css('top') == '-200px') bubble[3].css('top', '600px');
    if(bubble[4].css('top') == '-200px') bubble[4].css('top', '600px');
    if(bubble[5].css('top') == '-200px') bubble[5].css('top', '600px');
}

I have no idea why this isn't working, it's probably a logical error on my part. But I can't for the life of me find it. Any help would be appreciated. Thanks for your time.

Do you get any errors? Which lines of code are being executed? — Halcyon
– Halcyon, Commented Mar 4, 2013 at 17:14
All lines are being executed and if I run the resetBubbles function, the code works as I want, but it is no use when the number of elements needs to increase. Line 16 is the line that is not running as desired. — gaynorvader
– gaynorvader, Commented Mar 4, 2013 at 17:16

Halcyon · Accepted Answer · 2013-03-04 17:19:12Z

1

Is it possible that the call to animate conflicts with you custom settings the top property? ie. you set it, but top is immediately altered again by animate. You can pass a callback to animate that will run when the animation has finished. That's when you should reset your bubble position.

function animate_bubble(index) {
    bubble[index].animate({ top: "0px" }, 2000 /* 2 seconds */, function () {
        bubble[index].css({ top: "600px" });
        animate_bubble(index);
    }
}
animate_bubble(0);
animate_bubble(1);
// etc .. probably do this in a for-loop

You'll need to find some way to cancel the animation though, shouldn't be too hard.

answered Mar 4, 2013 at 17:19

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

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

1 Comment

gaynorvader Over a year ago

Thanks, this put me on to the solution.

gaynorvader · Accepted Answer · 2013-03-04 18:13:51Z

The problem was that bubbleFirst was incremented before the animation was finished. I changed my function to the following:

function animateBubbles(){
    clearTimeout(bubbleTimer);//stop from looping before this is finished

    for(var i = 0; i < visibleBubbles + 1; i++){
        count = i + bubbleFirst;
        if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
        if (count == bubbleFirst) 
        {
            bubble[count].animate({top:'-=' + bubbleHeight, opacity: 0}, bubbleAnimationSpeed, function(){
                bubble[bubbleFirst].css('top', displayHeight+'px');
                bubble[bubbleFirst].css('opacity', '1'); 
            });
        }
        else if(i == visibleBubbles)
        {
            bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed, function(){
                bubbleFirst++;
                if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
                bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);/*start looping again*/
            });
        }
        else bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed);
    }       
}

Thanks for your input guys!

Collectives™ on Stack Overflow

Can't change css in Jquery when using a variable to reference an index of an array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related