Question

I am having a strange problem with the css() function. Here’s my code snippet.

console.log('' + $(this).css('left') + ':' + $(this).css('top'));
console.log('Desired position - ' + return_to_left + ':' + return_to_top);
$(this).css('top', return_to_top + 'px');
$(this).css('left', return_to_left + 'px');
console.log('Finally: ' + $(this).css('left') + ':' + $(this).css('top'));

The output I get on the console is this.

458px:2113px
Desired position - 448px:2102px;
Finally: 458px:2113px;

Could anyone suggest why this might be happening? I have tried experimenting with ‘!important’. Doesn’t help.

(Also, for context, this code is part of a callback function after an animation. It tries to position the element back to where it was before animation began.)

Thank you for your help.

Answer 1

Found the problem!!

This:

console.log('Desired position - ' + return_to_left + ':' + return_to_top);

Outputs…

Desired position - 448px:2102px;

therefore your variables return_to_left and return_to_top ALREADY have the px string at the end.

Your css call looks like this:

$(this).css('top', '448pxpx');
$(this).css('left', '2102pxpx');

Which won’t work! :p Remove the + 'px' from the end of the css calls.