Question

I’ve run into a mysterious problem. I’m using jQuery’s animate function and the object I’m animating is not moving to the ‘left’ coordinate I provide; rather the left coordinate is always 0. However, the ‘top’ coordinate does move as expected. I had this working fine at one point and I rearranged some things around and it has stopped.

        var new_x,
            new_y,
            player_tranistion_holder;

        new_x = bg_app.boardModel[id_num].x+'px';
        new_y = (bg_app.boardModel[id_num].chips.length) * bg_app.game_utils.parse_css_dimension(selected_chip.chip.css('height'));

        console.log(new_x) //outputs 300px for example - the expected value;

        selected_chip.chip.animate({'left':  new_x, 'top': new_y }, 500, 'easeInOutQuad', function () {
               console.log(selected_chip.chip.css('left'); //output is 0
        });

Any idea what could cause this to screw up? The stuff I changed around it was merely in how the function came to be called, nothing in the function itself. Do I have some syntax error that I’m missing?

I’ve put the broken site here:

http://www.warunicorn.com/bg_show_busted/

here is an example with it working:

http://www.warunicorn.com/bg_show/

Any advice would be appreciated.

Answer 1

I found the problem. When using the animate function if the new value passed in is the same as the current value of the object jQuery gets confused and sets the value to 0. I haven’t done extensive testing on this and so there may be exceptions where it does work, but in this case, that was the problem.