Javascript translateX值未得到更新

我正在尝试建立一个照片滑块。现在我不介意我做这件事的方式是否有那么好。我想知道的是，为什么在我通过jQuery更改

TranslateX

值，然后将其打印到控制台后，它不会打印更改后的值

var translateX；
函数transX_func（）{
var矩阵=$（'#img1，#img2，#img3，#img4，#img5'）.css（'transform'）.split（/[（）]）；
var newArray=newArray（）；
newArray=矩阵[1]。拆分（'，'）；
for（新数组中的a）{
newArray[a]=parseInt（newArray[a]，10）；
}
var transX=newArray[4]；
translateX=transX；
}
$（“#下一步”）。单击（函数（事件）{
event.preventDefault（）；
transX_func（）；
如果（translateX==0）{
$（“#img1，#img2，#img3，#img4，#img5”）.css({
“transform”：“translateX（-100%）”
});
transX_func（）；
console.log（translateX）；
}   
else{}
}); 

编辑： 由于您的评论，我在此处添加了完整的代码：

这不是我最初遇到问题的代码，但它非常相似，仍然存在同样的问题

---

我通过理解是什么使得var的值不被更新来解决了这个问题，我在下面发布了答案。

我不能确定这种行为，因为我们没有您代码片段的完整上下文（css transform=>初始值，何时/如何更改…），但有一个像

transform:translateX（0）这样的起点以确保
您的矩阵不会返回
matrix=[“none”]

您的函数似乎正确显示了值

注意，我意识到这个答案不是答案

您将css转换的值更改为
-100%
，该值返回计算值（即：img width为800px，将返回-800）

此值不变，因此显示相同的数字。我可能又错了，但添加一个增量计数器（添加在上面的代码笔中）会更改该值并显示新计算的值

我希望这至少能给你一些线索……
首先，我要感谢Yann提供了非常详细的答案，而且你花了时间写了所有这些

再看一眼，我发现我没有把完整的MCVE放进去，这可能会解决我的下一个问题。
我是这里的一个新用户，所以我会尝试并快速获取：）

我现在将添加整个MCVE，以便您可以查看并复制它

最后我终于意识到为什么价值没有更新。
事实上，的确如此。在一个2秒的延迟中，因为我使用了“transition 2s”。所以函数添加了当时的值，而不是更改后的完整值，因为值是逐渐更改的

当我删除“transition:2s”时，一切都很好。
虽然这不是一个好的解决方案，因为我确实需要制作动画。
现在我正在考虑如何才能做到这一点

谢谢大家的回复。
这是没有动画的工作代码（我正在努力理解如何做）

可能console.log没有等待transX_func（）完成。你检查过了吗？一个简单的MCVE将有助于找到问题…这个问题怎么能得到这么多的赞成票，而它应该关闭，因为缺少relavnt MCVE？？？有人能复制它吗？
var translateX = 0;

var firstVal = 0;

function transX_func(){

    var matrix = $('#img1,#img2,#img3,#img4,#img5').css('transform').split(/[()]/);
    console.log("matrix = ", matrix);
    var newArray = new Array();         
    newArray = matrix[1].split(',');

    for (a in newArray ) {
        newArray[a] = parseInt(newArray[a], 10); 
    }
    var transX = newArray[4];
    translateX = transX;
    console.log("translateX inner = ",translateX);
}


$('#next').click(function(event){       
    event.preventDefault();
    if(translateX == 0){
        $('#img1,#img2,#img3,#img4,#img5').css({'transform':'translateX(-100%)'});      
        transX_func();
        firstVal = translateX;
    }
    else{
        var newVal = firstVal + translateX;
        $('#img1,#img2,#img3,#img4,#img5').css({'transform':'translateX(' + newVal + 'px)'});       
        transX_func();
    }


}); 

$('#prev').click(function(){

});