javascript - 向图像平移添加缓动

Question

我正在使用一些 JavaScript 和 jQuery(带有缓动插件)来创建虚拟游览；实际上只是一个可以左右平移的长图像。我发现这个非常适合这个原因:http://jsfiddle.net/MvRdD/1/ .有没有办法为动画添加缓动？

Answer 1

http://jsfiddle.net/ARTsinn/MvRdD/890/

$(document).ready(function() {
    $.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
    var animateTime = 10,
        offsetStep = 5,
        scrollWrapper = $('#wrap');

    //event handling for buttons "left", "right"
    var aktiv;
    $('.bttL, .bttR').mousedown(function(e) {
        if (e.target.className === 'bttR') {
            aktiv = window.setInterval(function() {
                scrollWrapper.animate({
                    scrollLeft: '+=' + 20
                }, {
                    duration: 600,
                    queue: false,
                    easing: 'easeOutCirc'
                });
            }, 10);
        } else if (e.target.className === 'bttL') {
            aktiv = window.setInterval(function() {

                scrollWrapper.animate({
                    scrollLeft: '-=' + 20
                }, {
                    duration: 1200,
                    queue: false,
                    easing: 'easeOutCirc'
                });
            }, 10);

        }
    }).mouseup(function() {
        window.clearInterval(aktiv);
    });


    scrollWrapper.mousedown(function(event) {
        $(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function(event) {
        $(this).data('down', false);
    }).mousemove(function(event) {
        if ($(this).data('down')) {
            $(this).stop(false, true).animate({
                scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
            }, {
                duration: 600,
                queue: false,
                easing: 'easeOutCirc'
            });
        }
    }).mousewheel(function(event, delta) {
        $(this).stop(false, true).animate({
            scrollLeft: '-=' + delta * 60
        }, {
            duration: 400,
            queue: false,
            easing: 'easeOutCirc'
        });
        event.preventDefault();
    }).css({
        'overflow': 'hidden',
        'cursor': '-moz-grab'
    });
});