如何在Javascript中的两个CSS值之间进行动画/插值

Question

以下代码工作正常，但我正在寻找一种方法来动画/插入两者之间创建幻灯片效果。我怎样才能做到这一点？

（我需要有奇怪的点击功能，因为这可能是因为网站的其余部分如何工作，否则我会使用jqueryUI幻灯片功能）

$('.boxbtn').on('click', function () {
    var boxwidth = $('.box').width();
    console.log(boxwidth);
    console.log('-' + boxwidth + 'px');

    var oddClick = $(this).data("oddClick");
    $(this).data("oddClick", !oddClick);
    if (oddClick) {

        $(".box").css('margin-left', ('-' + boxwidth + 'px'));
    }

});