jQuery动画不起作用

Question

我知道它多次发布在这里，我已经查看了其中的每一个并修改了我的代码无数次，但是我似乎无法使我的动画函数正常工作。 我正在尝试获取飞机的图像，该图像在屏幕上从左向右移动，停止一半。 这是我当前的代码：

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);
}

问题在于飞机根本不动。 我试过移动div和图像。 我尝试为其分配一个$（“＃plane”）。click。 而且我尝试了更多的事情。 这是我第一次尝试使用jQuery移动某些内容，因此有可能缺少一些简单的内容。 是的，该函数正在被调用。 感谢您的任何帮助！

Answer 1

这个

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

返回NaN因为从不调用width函数，您可能想要

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

小提琴

Answer 2

width不是jQuery中的属性。

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

Answer 3

$(document).width()需要作为一个函数来调用，您需要在方法名称后添加$(document).width()括号() 。

工作示例： 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>