jQuery动画不起作用

Question

I know this is posted on here multiple other times, and I have looked at every single one of those and modified my code countless times, but I can't seem to get my animate function to work. I'm trying to get an image of a plane to move from left to right across the screen, stopping halfway. Here is my current code:

HTML:

<div id="plane">
    <img src="plane.png" alt="" id="plane2" height='100px' width='100px'>
</div>

CSS:

#plane {
    position: relative;
}

javacript/jQuery:

function animatePlane() {
    var width = $(document).width / 2;
    $("#plane").animate({
        left: '+=' + width
    }, 500);
}

The problem is that the plane does not move at all. I've tried moving the div and the image. I've tried assigning it a $("#plane").click. And I've tried many more things. This is my first time trying to use jQuery for moving something, so it's possible I'm missing something simple. And yes, the function is being called. Thank you for any help!

Answer 1

This

var width = $(document).width / 2;

returns NaN as the width function is never called, you probably wanted

var width = $(window).width() / 2;

FIDDLE

Answer 2

width is function not property in jQuery.

function animatePlane() {
    var width = $(document).width() / 2;
    $("#plane").stop().animate({
        left: '+=' + width
    }, 500);
}

Answer 3

$(document).width() needs to be called as a function, you need to add opening and closing parenthesis () after the method name.

Working example: http://codepen.io/anon/pen/LVZWqd

 function animatePlane() { var width = $(document).width() / 2; $("#plane img").animate({ left: width+"px" }, 500); } 

 #plane img { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="plane"> <img src="http://lorempixel.com/100/100" alt="" id="plane2" height=100" width=100" /> <br /> <button onclick="animatePlane()">Animate the Image</button> </div>