Javascript Can'；设置动画后，不要将屏幕滚动到div的中心'；s宽度 网站的运作方式： 多个“条纹”，每个都有自己的图片，水平显示 窗口向两侧滚动以显示更多信息 当你点击一个条带时，它会扩展到一个更大的宽度，屏幕会滚动到那个大条带的中心

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

您可以在此处查看我目前拥有的内容：

我使用的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);
    }
});

带“.page”的块是因为在这些条带中会有两个不同的、更大的块，它们的行为相同，只是它们会更大一点

你知道我该怎么做吗

---

干杯

我想，因为animate（）在某种程度上是异步工作的，所以您没有准确的宽度。尝试将代码放在最后一个动画完成回调

$（this）中。动画（{'width'：'68%，}，300，function（）{…}）或者可能只是：
var elWidth=$（this）.parent（）.width（）*68/100好的，这似乎改善了它！在右边的项目上，它仍然需要再滑动一点，但是如果项目在左边，它会滚动太多。。。