Javascript jQuery悬停时无限/连续滚动

我似乎有一些问题与悬停附近的边缘滚动解决方案，我已经有一个拖动滚动一个实现

这是我的密码：

演示1（当前页面）：

演示2（我尝试的内容）：

HTML摘录：

<section class="row">
        <div class="scroll-left" style="opacity: 0;"></div>
        <div class="row-scroll">
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
            .....
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
        </div>
        <div class="scroll-right" style="opacity: 0;"></div>
    </section>
    <section class="row">
        <div class="scroll-left" style="opacity: 0;"></div>
        <div class="row-scroll">
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
            .....
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
        </div>
        <div class="scroll-right" style="opacity: 0;"></div>
    </section>

它应该是一个Pulse替代品/WebApp，因此设计（我正在处理字体）

有什么想法吗

---

先谢谢你。

好的，在一点点磕头之后，我想到了这个：

$(".scroll-left").hover(function() {
    $(this).parent().animate({scrollLeft: 0}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});

$(".scroll-right").hover(function() {
    $(this).parent().animate({scrollLeft: $(this).siblings(".row-scroll").width()}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});

它基本上使用了

scrollLeft

函数，并动态计算滚动元素的宽度以用作滚动到值。是一个演示此代码的JSFIDLE

---

我希望有人能用上这个问题，我正在对这个问题进行适当的重命名。

好的，在进行了一点脑力激荡之后，我想到了这个：

$(".scroll-left").hover(function() {
    $(this).parent().animate({scrollLeft: 0}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});

$(".scroll-right").hover(function() {
    $(this).parent().animate({scrollLeft: $(this).siblings(".row-scroll").width()}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});

它基本上使用了

scrollLeft

函数，并动态计算滚动元素的宽度以用作滚动到值。是一个演示此代码的JSFIDLE

---

我希望有人能用上这个问题，我正在适当地重新命名这个问题。

我知道已经太晚了，但是如果其他人需要帮助，他们可以得到解决方案。 试试这个动画循环

function loopl(){
    $('.mCSB_container').animate({ "left": "+=80px" }, "800", 'linear', loopl  );
}        
function loopr(){
    $('.mCSB_container').animate({ "left": "-=80px" }, "800", 'linear', loopr  );
}
function stop(){
    $('.mCSB_container').stop();
}
$( "#left" ).hover(loopl, stop);
$( "#right" ).hover(loopr, stop);

---

我知道这太晚了，但是如果其他人需要帮助，他们可以得到解决方案。 试试这个动画循环

function loopl(){
    $('.mCSB_container').animate({ "left": "+=80px" }, "800", 'linear', loopl  );
}        
function loopr(){
    $('.mCSB_container').animate({ "left": "-=80px" }, "800", 'linear', loopr  );
}
function stop(){
    $('.mCSB_container').stop();
}
$( "#left" ).hover(loopl, stop);
$( "#right" ).hover(loopr, stop);