What is wrong with this code

Question

function moveit() { var newTop = Math.floor(Math.random()*350); var newLeft = Math.floor(Math.random()*1024); var newDuration = 9000 $('#friends').animate({ top: newTop, left: newLeft, !!! --> width: "+="+((newTop-$('friends').css('top'))*3), }, newDuration, function() { moveit(); }); } $(document).ready(function() { moveit(); }); 

It is assumed that the image will move (works). I added a line with the inscription "!!! →", which should make the image larger than closer to the bottom of the page.

What did I do wrong? The code does not cause errors.

Answer 1

$('friends').css('top') returns a string, you will need to convert it to int before you can use it to subtract from newTop

 parseInt($('friends').css('top'), 10) 

Would do the trick

You also need to use the class id or class id in your jQuery selector, either '#friends' or '.friends' , but I assume you are looking for something with a friends id

try it

 width: "+="+((newTop - parseInt($('#friends').css('top'), 10))*3), 

Answer 2

Don't you mean $('#friends') instead of just $('friends') ? Your expression looks for the friends element tag and tries to get its top CSS property value.

I would advise you to cache the $('friends') selector as well, so you don't need to select it twice to call .animate() .

Answer 3

Pretty sure your problem .css("top") will return a string value, like 100px . Instead, you want to use .position().top to get an integer value.

Answer 4

I think your problem is how you get the top position. Maybe not exactly what you want, but I got it here ...

http://jsfiddle.net/shaneblake/YXMbh/