Question

I am using the following code to glide an image across the top layer of a webpage but its a little jittery, giving streaky vertical lines down the image especially when over content with many nested elements. This is the case even when the border is set to zero. Any suggestions for a smoother method for gliding an image with JS/CSS?

border=4;
pps=250;  // speed of glide (pixels per second)
skip=2;  // e.g. if set to 10 will skip 9 in 10 pixels
refresh=3;  // how often looks to see if move needed in milliseconds

elem = document.createElement("img");
elem.id = 'img_id';
elem.style.zIndex="2000";
elem.style.position="fixed";
elem.style.top=0;
elem.style.left=0;
elem.src='http://farm7.static.flickr.com/6095/6301314495_69e6d9eb5c_m.jpg';
elem.style.border=border+'px solid black';
elem.style.cursor='pointer';
document.body.insertBefore(elem,null);

pos_start = -250;
pos_current = pos_start;
pos_finish = 20000;

var timer = new Date().getTime();
move();

function move ()
{
  var elapsed = new Date().getTime() - timer;
  var pos_new = Math.floor((pos_start+pps*elapsed/1000)/skip)*skip;

  if (pos_new != pos_current)
  {
    if (pos_new>pos_finish)
      pos_new=pos_finish;

    $("#img_id").css('left', pos_new);
    if (pos_new==pos_finish)
      return;

    pos_current = pos_new;
  }

  t = setTimeout("move()", refresh);
}

Answer 1

I do not have a solution that I am sure of will prevent the vertical lines from appearing.
I do however have a couple of tips to improve your code so performance increases and you might have a chance that the lines disappear.

1. Cache the image element outside of your move function:

   var image = $("#img_id")[0];

   In your code, there is no reason to query the image ID against the DOM every 3 milliseconds. jQuery’s selector engine, Sizzle has to a lot of work¹.

2. Don’t use the jQuery CSS function:

   image.style.left = pos_new;

   Setting a property object is faster than a function call. In the case of the jQuery css function, there are at least two function calls (one to css and one inside css).

3. Use interval instead of timeout:

   setInterval(move, refresh);

   I would consider an interval for one-off animations I wanted to be as
   smooth as possible

   setTimeout or setInterval?

---

One other option for smoother animation is to use CSS transitions or animations. A great introduction and comparison can be found in CSS Animations and JavaScript by John Resig

Browser support table: http://caniuse.com/#search=transition

A JavaScript library that I find makes CSS animation via JavaScript very easy is morpheus.

---

¹ Under the hood, this is the code it goes through every 3 milliseconds to find your image:

In a browser that supports 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);
};

And a browser that doesn’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;
};