这段代码有什么问题

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 supposed to make an image fly around (works). I added the line marked with the "!!! -->" that should make the image get bigger the closer it is to the bottom of the page.

What did I do wrong? The code doesn't throw any errors.

Answer 1

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

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

Would do the trick

Also you need to use an ID or class identifier in your jQuery selector, either '#friends' or '.friends' but I imagine you're looking for something with the ID of friends

Try this

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

Answer 2

Don't you mean $('#friends') instead of just plain $('friends') ? Your statement is looking for an element tag "friends" and trying to get it's top CSS property value.

I'd suggest you also cache the $('friends') selector so that you don't have to select it twice for the .animate() call.

Answer 3

Pretty sure your problem is .css("top") will return a string value like 100px . You want to use .position().top instead to get the integer value instead.

Answer 4

I think your issue is in how you're getting the top position. May not be exactly what you want, but I got it working here...

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