Jquery Horizontal Slide
<p>i'm trying to slide some divs horizontally however its not reacting as I had hoped...</p>

<p>Basically I have a set number of "products" each inside a product div - I would like it so that when the user hovers over the right arrow, the products slide to the right, revealing more, mouse over the left arrow, products slide to the left</p>

<p>couple problems i'm running into...</p>

<p><strong>1.</strong> I can't seem to have an accurate slide where it stops if it reaches the last div, in either direction</p>

<p><strong>2.</strong> I think my jquery code is messed up, its a hodge podge of copy/paste code i've found w/ MINOR tweaking from myself - still really new w/ Jquery</p>

<p><strong>Here is my code</strong></p>

<pre><code>&lt;script type="text/javascript" language="javascript"&gt;

$(document).ready( function() { 

    $('#btn-next').hover(function(){

        $('#product-slides').stop().animate({left: '-=300'},2000,function(){
            setTimeout(function() {$('#product-slides').css("left", "-=300")},2000);
        }); 

    },
    function() { 
        $('#product-slides').stop();
    });

    $('#btn-previous').hover(function(){

        $('#product-slides').stop().animate({left: '+=300'},2000,function(){
            setTimeout(function() {$('#product-slides').css("left", "+=300")},2000);
        }); 

    },
    function() { 
        $('#product-slides').stop();
    });

});

&lt;/script&gt;

&lt;div class="featured"&gt;

&lt;img src="/images/btn-previous.png" alt="Previous Products" class="previous" id="btn-previous" /&gt;
&lt;div class="product-slider"&gt;
    &lt;div id="product-slides"&gt;
        &lt;div class="product"&gt;&lt;/div&gt;
        &lt;div class="product"&gt;&lt;/div&gt;
        &lt;div class="product"&gt;&lt;/div&gt;
        &lt;div class="product"&gt;&lt;/div&gt;
        &lt;div class="product"&gt;&lt;/div&gt;
        &lt;div class="product"&gt;&lt;/div&gt;
        &lt;div class="product"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;img src="/images/btn-next.png" alt="Next Products" class="next" id="btn-next" /&gt;
</code></pre>

<p></p>

<p>I really appreciate your help with this.... Please let me know if you need any additional information - again thanks very much in advance</p>
