Possible to scroll to next element inside a div?

Question

I have a gallery of vimeo videos inside a horizontal scrolling div. On hover of left/right arrows, the gallery will animate to the left/right. My question is, is it possible so that when I stop hovering, the div will keep scrolling to the next video index?

For example, when I'm scrolling through the containing div, if half of video1 is cut off when I mouseout, can the div keep scrolling until it reaches video2?

left-arrow        |video1     video2    video3|    right-arrow
                  |------containing div------>|

Here's what i have at the moment:

HTML

<div id="animation-wrapper">
<span id="animate-arrow-left">&#8672;</span>
<div id="animation-viewport">
<div id="all-animate-video">
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<span id="animate-arrow-right">&#8674;</span>
</div>

JavaScript

function scrollAnimate() {
$('#animation-viewport').animate({ scrollLeft: amount }, 100, 'linear',function() {
    if (amount != '') {
            scrollAnimate();
         }
     });
 }
$('#animate-arrow-right').hover(function() {
     amount = '+=40';
     scrollAnimate();
 }, function() {
     amount = '';
 });

$('#animate-arrow-left').hover(function() {
     amount = '-=40';
     scrollAnimate();
 }, function() {
     amount = '';
 });

Answer 1

Here is a working example that you can apply to your code:

http://jsfiddle.net/studiotate/hz3bk94k

You can manually scroll or use the left and right areas to automatically scroll.

HTML:

<div id="container">
    <div id="arrows">
        <div class="arrow left"></div>
        <div class="arrow right"></div>
    </div>
    <div id="videos">
        <div class="video red"></div>
        <div class="video blue"></div>
        <div class="video green"></div>
    </div>
</div>

CSS:

body {
    margin: 0px auto;
}

#arrows .arrow {
    background-color: #000;
    height: 200px;
    opacity: .5;
    position: fixed;
    top: 0px;
    width: 50px;
}

#arrows .arrow.left {
    left: 0px;
}

#arrows .arrow.right {
    right: 0px;
}

#videos {
    font-size: 0px;
    height: 200px;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
}

#videos .video {
    display: inline-block;
    height: 200px;
    width: 100%
}

#videos .video.red {
    background-color: red;
}

#videos .video.blue {
    background-color: blue;
}

#videos .video.green {
    background-color: green;
}

JS:

var scrollDirection, scrollInterval, scrollLeft;

var startScrolling = function(direction) {
    scrollDirection = direction;
    scrollInterval = setInterval(function() {
        var scroll = scrollDirection == 'left' ? -5 : 5;
        var left = $('#videos').scrollLeft() + scroll;
        $('#videos').scrollLeft(left);
    }, 1);
};

var stopScrolling = function() {
    clearInterval(scrollInterval);
};

$('.arrow').on('mouseleave', stopScrolling);
$('.arrow.left').on('mouseenter', function() {
    startScrolling('left');
});
$('.arrow.right').on('mouseenter', function() {
    startScrolling('right');
});

$('#container').on('mouseleave', function() {
    var video = 0;
    $('.video').each(function() {
        if (
            (scrollDirection == 'left' && $(this).offset().left <= 0)
            ||
            (scrollDirection == 'right' && $(this).offset().left >= 0)
        ) {
            video = $(this).index();
            return false;
        }
    });

    var left = $('#videos').outerWidth() * video;
    $('#videos').animate({ scrollLeft: left });
});