Question

It seems when I make two calls to the function stockTicker() with seperate div ID’s – the two tickers will not run smoothly and jump around:
http://jsfiddle.net/Tb6VY/

But if I only have one ticker it works fine:
http://jsfiddle.net/39JJ4/

Any ideas on how to get the first one to work?

Function:

( function($) {
    $.fn.stockTicker = function(options) {

        if (typeof (options) == 'undefined') {
            options = {};
        }

        var settings = $.extend( {}, $.fn.stockTicker.defaults, options);
        var $ticker = $(this);

        function startTicker() {
            //stopTicker();
            $firstElem = $ticker.children(":first");
            var $width = $firstElem.width();
            $ticker.stop().animate({
                "right": "+="+$width+"px"
            }, {
                duration: settings.speed*200,
                easing: 'linear',
                complete: function() {
                    $ticker.css({"right": "-="+($width)+"px"});
                    $firstElem.clone().appendTo($ticker);
                    $firstElem.remove();
                    startTicker();
                }
            });
        }

        function stopTicker() {
            $ticker.stop();
        }

        $ticker.hover(stopTicker, startTicker);
        startTicker();
    };

    $.fn.stockTicker.settings = {};
    $.fn.stockTicker.defaults = {
        tickerID :null,
        speed :1,
    };
})(jQuery);

Answer 1

You forgot to declare $firstElem var, causing it to be treated as a “global” variable (and thus coming into conflict with the other ticker).

After declaring var $firstElem = $ticker.children(":first");, the ticker works fine. Fiddle: http://jsfiddle.net/Tb6VY/2/