我沒有解決方案，我肯定會防止垂直線出現。
但是，我確實有一些技巧來改善您的代碼，以便提高性能，並且您可能有線條消失的機會。
緩存您的移動功能以外的圖像元素：
var image = $("#img_id")[0];
在你的代碼，沒有任何理由來查詢圖像ID對每3毫秒的DOM。 jQuery的選擇器引擎，Sizzle需要很多工作¹。
不要使用jQuery的CSS功能：
image.style.left = pos_new;
設置屬性對象比函數調用更快。在jQuery css函數的情況下，至少有兩個函數調用（一個到css和一個在css之內）。
使用間隔，而不是超時：
setInterval(move, refresh);
我會考慮一次性動畫的間隔，我想是因爲 順利地進行
setTimeout or setInterval?
平滑動畫的另一個選項是使用CSS轉換或動畫。一個偉大的介紹和對比可以CSS Animations and JavaScript由John Resig的
瀏覽器支持表中找到：http://caniuse.com/#search=transition
，我覺得讓通過JavaScript CSS動畫非常簡單JavaScript庫是morpheus。
¹引擎蓋下，這是它通過每3毫秒找到你的形象代碼：
在支持querySelectorAll瀏覽器：
Sizzle = function(query, context, extra, seed) {
context = context || document;
// Only use querySelectorAll on non-XML documents
// (ID selectors don't work in non-HTML documents)
if (!seed && !Sizzle.isXML(context)) {
// See if we find a selector to speed up
var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(query);
if (match && (context.nodeType === 1 || context.nodeType === 9)) {
// Speed-up: Sizzle("TAG")
if (match[1]) {
return makeArray(context.getElementsByTagName(query), extra);
// Speed-up: Sizzle(".CLASS")
} else if (match[2] && Expr.find.CLASS && context.getElementsByClassName) {
return makeArray(context.getElementsByClassName(match[2]), extra);
}
}
if (context.nodeType === 9) {
// Speed-up: Sizzle("body")
// The body element only exists once, optimize finding it
if (query === "body" && context.body) {
return makeArray([ context.body ], extra);
// Speed-up: Sizzle("#ID")
} else if (match && match[3]) {
var elem = context.getElementById(match[3]);
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if (elem && elem.parentNode) {
// Handle the case where IE and Opera return items
// by name instead of ID
if (elem.id === match[3]) {
return makeArray([ elem ], extra);
}
} else {
return makeArray([], extra);
}
}
try {
return makeArray(context.querySelectorAll(query), extra);
} catch(qsaError) {}
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
} else if (context.nodeType === 1 && context.nodeName.toLowerCase() !== "object") {
var oldContext = context,
old = context.getAttribute("id"),
nid = old || id,
hasParent = context.parentNode,
relativeHierarchySelector = /^\s*[+~]/.test(query);
if (!old) {
context.setAttribute("id", nid);
} else {
nid = nid.replace(/'/g, "\\$&");
}
if (relativeHierarchySelector && hasParent) {
context = context.parentNode;
}
try {
if (!relativeHierarchySelector || hasParent) {
return makeArray(context.querySelectorAll("[id='" + nid + "'] " + query), extra);
}
} catch(pseudoError) {
} finally {
if (!old) {
oldContext.removeAttribute("id");
}
}
}
}
return oldSizzle(query, context, extra, seed);
};
而且那並不是一個瀏覽器't：
var Sizzle = function(selector, context, results, seed) {
results = results || [];
context = context || document;
var origContext = context;
if (context.nodeType !== 1 && context.nodeType !== 9) {
return [];
}
if (!selector || typeof selector !== "string") {
return results;
}
var m, set, checkSet, extra, ret, cur, pop, i,
prune = true,
contextXML = Sizzle.isXML(context),
parts = [],
soFar = selector;
// Reset the position of the chunker regexp (start from head)
do {
chunker.exec("");
m = chunker.exec(soFar);
if (m) {
soFar = m[3];
parts.push(m[1]);
if (m[2]) {
extra = m[3];
break;
}
}
} while (m);
if (parts.length > 1 && origPOS.exec(selector)) {
if (parts.length === 2 && Expr.relative[ parts[0] ]) {
set = posProcess(parts[0] + parts[1], context, seed);
} else {
set = Expr.relative[ parts[0] ] ?
[ context ] :
Sizzle(parts.shift(), context);
while (parts.length) {
selector = parts.shift();
if (Expr.relative[ selector ]) {
selector += parts.shift();
}
set = posProcess(selector, set, seed);
}
}
} else {
// Take a shortcut and set the context if the root selector is an ID
// (but not if it'll be faster if the inner selector is an ID)
if (!seed && parts.length > 1 && context.nodeType === 9 && !contextXML &&
Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1])) {
ret = Sizzle.find(parts.shift(), context, contextXML);
context = ret.expr ?
Sizzle.filter(ret.expr, ret.set)[0] :
ret.set[0];
}
if (context) {
ret = seed ?
{ expr: parts.pop(), set: makeArray(seed) } :
Sizzle.find(parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML);
set = ret.expr ?
Sizzle.filter(ret.expr, ret.set) :
ret.set;
if (parts.length > 0) {
checkSet = makeArray(set);
} else {
prune = false;
}
while (parts.length) {
cur = parts.pop();
pop = cur;
if (!Expr.relative[ cur ]) {
cur = "";
} else {
pop = parts.pop();
}
if (pop == null) {
pop = context;
}
Expr.relative[ cur ](checkSet, pop, contextXML);
}
} else {
checkSet = parts = [];
}
}
if (!checkSet) {
checkSet = set;
}
if (!checkSet) {
Sizzle.error(cur || selector);
}
if (toString.call(checkSet) === "[object Array]") {
if (!prune) {
results.push.apply(results, checkSet);
} else if (context && context.nodeType === 1) {
for (i = 0; checkSet[i] != null; i++) {
if (checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i]))) {
results.push(set[i]);
}
}
} else {
for (i = 0; checkSet[i] != null; i++) {
if (checkSet[i] && checkSet[i].nodeType === 1) {
results.push(set[i]);
}
}
}
} else {
makeArray(checkSet, results);
}
if (extra) {
Sizzle(extra, origContext, results, seed);
Sizzle.uniqueSort(results);
}
return results;
};
嘗試使用jQuery。它通常更加流暢，而且比現在做的要容易得多。 – RobinJ
@RobinJ號這不是一個jQuery的問題，答案是不使用jQuery。這是一個很好的問題，因爲理解動畫的怪癖並不是很好理解。 – Incognito
我開始得出結論，沒有辦法像這樣在250pps下滑動這樣的圖像而沒有一些裸奔。順便說一句，如果任何人在將來做任何類似的動畫，我會徹底推薦這個JS庫：http://fx.inetcat.com/它不能解決上述問題，但它仍然非常有用。 –