jquery scroll div right onmouseover

i have a right arrow image beside a div,

all i want is for the div to scroll to the right when the mouse is over the right arrow beside it

heres my jquery:

$(document).ready(function() {

    $(".thumbs-right").hover(function() {

        $(this).attr("src","images/arrow-big-right-h.png");
        $('.thumbs').animate({scrollRight: 20 + 'px'}, 600);

    }, function() {

        $(this).attr("src","images/arrow-big-right.png");

    });

});

heres the css:

.thumbs {
    float: left;
    width: 500px;
    height: 150px;
    background: red;
    overflow: hidden;
}

and the html:

    <div class="thumbs">

        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />
开发者_运维技巧        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />
        <img src="images/thumb.png" alt="thumb" />

    </div>

    <img src="images/arrow-big-right.png" alt="right arrow" class="thumbs-right" />

it doesnt work at all.

Add to your CSS class...

position: relative;

Change

$('.thumbs').animate({scrollRight: 20 + 'px'}, 600);

To

$('.thumbs').animate({ left: '20px' }, 600);

That gets things moving at least.

Demo: http://jsfiddle.net/g75FS/1/

ok fix your css to this:

.thumbs {
    float: left;
    width: 500px;
    height: 150px;
    background: red;
    overflow: hidden;
}

.thumbs img {
    position: relative;
}

and the js to this:

$(".thumbs-right").hover(function() {

    $(this).attr("src","images/arrow-big-right-h.png");
    $('.thumbs img').animate({right:"+=20px"}, 600);
}, function() {
    $(this).attr("src","images/arrow-big-right.png");

});

and here is the working fiddle: http://jsfiddle.net/maniator/EfTCz/