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'
    });
});