在设置动画宽度后，无法将屏幕滚动到div的中心

Question

网站的工作方式：

• 多个＆＃34;条纹＆＃34;，每个都有它自己的图片，水平显示。
• 窗口滚动到两侧以显示更多
• 当你点击一个条纹时，它会扩展到一个更大的宽度，屏幕应该滚动到那个大条纹的中心。

我遇到的问题是屏幕居中的滚动条没有正常工作。我猜测它是因为div的宽度是动画的，所以计算得不到正确的值。

您可以在此处查看我目前所拥有的内容：http://sandbox.stamina.pt/shiny-people/

JS我用的是：

$(".site-content .item").toggle(function() {
    $(this).addClass('open');
    if(clicked != $(this))
    {
        // this bit detects if the click was on a different slice and closes the old open one.
        if($(clicked).hasClass('page'))
        {
            $(clicked).animate({
                'width' : '40%',
            }, 300);
        }
        else {
            $(clicked).animate({
                'width' : '17%',
            }, 300);
        }
    }
    $(this).animate({
        'width': '68%',
    }, 300);
    var elWidth = $(this).width();
    var viewportWidth = $(window).width();
    var elOffset = $(this).offset();

    $('.content-area').animate({"scrollLeft": (elOffset.left + (elWidth/2) - (viewportWidth/2)) }, 1500);
    clicked = $(this);
}, function() {
    $(this).removeClass('open');
    if($(this).hasClass('page'))
    {
        $(this).animate({
            'width': '40%',
        }, 300);    
    }
    else
    {
        $(this).animate({
            'width': '17%',
        }, 300);
    }
});

＆＃34; .page＆＃34;事情是因为在这些条纹中会有几个不同的，更大尺寸的块会表现相同，除非它们会更大一些。

关于如何使这项工作的任何想法？

干杯！