Javascript 淡入css延迟

您好，所以我试图淡入用flask获取的数据替换的参与者 HTML+CSS代码

<img class="imgContainer" onload="this.style.opacity=1" src="{{ url_for('static', filename='players/_' ~ player1.username ~ '_.png') }}"/>

.imgContainer {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;

我目前的问题是，它不会同时在两个容器中消失，而且它们之间存在延迟。

---

修复此问题并使其同时显示的最佳方法是什么？

加载元素后执行的Onload事件。也许你的图像没有在同一时间加载，这就是你的淡入淡出不匹配的原因。如果可能的话，我会尝试将图像包装成div并设置onload，或者使用@keyframes而不是onload（我不确定这一点）。

您的示例代码没有引用您提供的html。首先，jQuery的淡出不需要在css中设置转换。可以将速度和缓和作为额外参数进行编辑。第二如果您正在执行多个异步调用。他们将在不同的时间启动成功回调。

$.ajax({
        url : "/vote",
        type : "POST",
        data : { "winner" : "1", "player1" : player1, "player2" : player2 },
        cache : false,
        success : function(data) {
            $("#container").fadeOut()
            setTimeout(function(){
                $("#container").replaceWith(data);
            }, 1000);
        }
    });