ClearInterval not stopping
<p>I have the following JQuery code:</p>

<pre><code>JModel.ClipThumbs.Clip.prototype = {
    interval: null,

    setThumb: function(src) {
        this.mainThumb.src = src;
    },
    mouseEntered: function(el) {
        var temp        = this;
        var x           = 0;
        this.interval   = setInterval(function() {
            if (x &gt;= temp.galleryImgs.length) {
                x = 0;
            }
            // set main thumb
            temp.setThumb(temp.galleryImgs[x].src);
            // increment for the display (0/7 being bad looking to users)
            x++; 
            // update image count display
            $(temp.clipCount).html(""+x+"/"+temp.galleryImgs.length); 
        }, 1000);
    },
    mouseLeft: function(el) {
        clearInterval(this.interval);
    }
};
</code></pre>

<p>When I leave the gallery rotation doesn't stop</p>

<p>Ideas?</p>

<p><strong>EDIT</strong>: the fix was:</p>

<pre><code>jQuery(this.mainThumb)
    .bind('mouseenter', jQuery.proxy(this.mouseEntered, this))
    .bind('mouseleave', jQuery.proxy(this.mouseLeft, this));
</code></pre>

<p>The <code>mouseleave</code> had to have a <code>jQuery.proxy</code> with this bound also to access this.</p>
