$(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");

    });

});

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

<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" />

position: relative;

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

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

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

.thumbs img {
    position: relative;
}

$(".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");

});