javascript - 向左/向右滚动带有动画的图像

Question

请看一下这个 DEMO 。

使用 this post 中的代码我已成功通过单击左侧或右侧链接使图像水平移动。

我想要实现的是以某种方式使图像跳跃更平滑。

这是我的代码:

<script>
    var scrollDiv = function(dir, px) {
        var scroller = document.getElementById('scroller');
        if (dir == 'l'){
            scroller.scrollLeft -= px;
        }
        else if (dir == 'r'){
            scroller.scrollLeft += px;
        }
    }
</script>

<a class="tArrowL" href="javascript: void(0);" onclick="scrollDiv('l', 80); return false;">« left</a>
<a class="tArrowR" href="javascript: void(0);" onclick="scrollDiv('r', 80); return false;">right »</a>
<div class="wrapOut">
    <div id="scroller" class="wrapIn">
        <img id="" src="http://lorempixel.com/output/nature-q-c-1044-480-2.jpg" />
    </div>
</div>

我尝试使用animate函数，但没有成功:

var scrollDiv = function(dir, px) {
    var scroller = document.getElementById('scroller');
    if (dir == 'l'){
        scroller.animate( { scrollLeft: '-= px' }, 1000);
    }
    else if (dir == 'r'){
        scroller.animate( { scrollLeft: '+= px' }, 1000);
    }
}

我正在触摸屏桌面上的 Windows 8 上的 IE 10 上进行测试，因此它也必须适用于滑动/点击事件。

如有任何帮助，我们将不胜感激!

Answer 1

<强> DEMO

您需要为scrollLeft设置动画jQuery 对象的属性 scroller ，而不是 HTMLObject scroller ，因为前者具有方法 animate .

var scrollDiv = function (dir, px) {
    var scroller = document.getElementById('scroller'), // HTMLObject
        go;   // holds '+=' or '-='

    if (dir == 'l') go = '-=';
     else go = '+=';     // no need for else-if here

    // `$(HTMLObject)` ---> `jQuery Object`
    $(scroller).animate({
        scrollLeft: go + px  // becomes '-=int' or '+=int' 
    }, 500); // duration
}