Javascript 显示时，隐藏div内的img会在短时间内像素化

我想这个问题以前已经得到了回答，但我在网上找不到类似的问题

我在一个隐藏的div a侧菜单中有一个img元素。它实际上不是隐藏的，它是一个绝对定位的div，位于身体边界之外。当用户单击按钮打开菜单时，我使用jQuery的animate通过播放其left属性将其移回视口。设置如下所示：

.menu { 
    .
    .
    .
    width: 200px;
    position: absolute;
    left: -200px;
} 

当用户单击按钮打开菜单时，我运行以下动画：

$('.menu').animate({
        left: "+=200"
    },
    500,
    function() {
        // stuff here
    }
);

问题是，当此动画完成时，菜单中的img将在短时间内（如3秒）像素化，然后正确渲染。每次我再次关闭和打开菜单时都会发生这种情况。我怎样才能解决这个问题

编辑

我准备了一把小提琴，但无法在小提琴上再现这个问题。图像渲染时不会出现任何问题。我在这里张贴的链接无论如何，也许这可以帮助了解设置。原因可能是动画制作时文档中存在的其他元素吗？或者可能是图像的大小

---

尝试在JSFIDLE中重现该问题，以便我们可以查看它。@MelanciaUK我已经用小提琴更新了该问题这听起来像是浏览器渲染延迟。可能会受到页面上元素数量、图像类型/压缩等的影响。遗憾的是，我们看不到问题的重现…@Fly我不明白的是，即使图像已经加载，也会发生这种情况，当我再次隐藏并显示div时，图像不会从网络中获取，因为它已经获取，但它仍然显示为pixelatedRight。通过渲染，我指的是浏览器在画布上绘制元素。我在Firefox的引导工具提示中看到过这种效果。你试过不同的浏览器吗？