How can I track position during jquery hover? Not after stop()
<p>I'm trying to make a sliding list of items to mimic netflix. Looking at their source code I have the html markup figured out and I think I have the concept for it pretty much figured out. I just need to be able to track the css right position during hover and do other things with it via another function while the hovering is happening rather than after the hover stops. </p>

<p><strong>Edit:</strong> More detail on the concept I'm trying to achieve. I will need to do two things while the "set" is sliding.</p>

<ol>
<li><p>When a "item' slides off screen it needs to be removed from the set and then re-inserted at the other end of the set so I need a way to know when it has gone off the screen in either direction.</p></li>
<li><p>I need to know when the set has slid it's full length in either direction so I can reset its position.</p></li>
</ol>

<p>The only way I can think to achieve this illusion of a endlessly scrolling set is to track the css position while the set is sliding. I can handle the rest I think but just need to know how to plug into the .hover() or some other way to track it without interrupting .hover(). </p>

<p>I'm open to suggestions of other methods if .hover isn't appropriate. </p>

<p>Here is my code</p>

<p>HTML:</p>

<pre><code>&lt;div id="slider"&gt;
            &lt;div class="set"&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="img/book.png"&gt;
                &lt;/div&gt;
            &lt;/div&gt;&lt;!--end set--&gt;

            &lt;div class="prevBtn"&gt;&lt;/div&gt;
            &lt;div class="nextBtn"&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;!--end slider--&gt;
</code></pre>

<p>slider.js:</p>

<pre><code>(function() {

    var Slider = {

        init: function() {
            var set = $('#slider .set'),
            setLength = set.children().length * 190,

            prev = $('.prevBtn'),
            next = $('.nextBtn');
            self = this;


            prev.hover(function() {
                set
                    .css({right: set.position().right})
                    .animate({right: '-' + setLength + 'px'}, 8000);
            }, function() {
                set.stop();
            });

            next.hover(function() {
                set
                    .css({left: set.position().right})
                    .animate({right: setLength + 'px'}, 8000);
            }, function() {
                set.stop();
            });
        }
    }


    Slider.init();
}());
</code></pre>

<p>Thank you</p>
