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>