javascript - GIF 在浏览器中正常重启，但在使用 show()/hide() 后不在我的网站上

Question

我想创建一个图像，然后播放一个 gif 图像，无限期地重复。当我链接到这个GIF时，它会在我的浏览器中正常循环。但是，当我用 show()/hide() 切换它的显示时：

var pics = $('.slider');
function autoSlideIn() {
    if (index > pics.length - 1) {
        index = 0;
    }
    $(pics[index]).show();
    setTimeout("autoSlideOut()", duration);
}

function autoSlideOut() {
    if (index > pics.length - 1) {
        index = 0;
    }
    $(pics[index]).hide();
    index++;
    autoSlideIn();
}

<img class="slider" src="www.image.com/picture.png"/>
<img class="slider" src="www.gifdontwork.com/gif.gif"/>

相反，GIF 将只播放一次，然后卡在一个帧上，尽管它正常重复，但永远不会重新启动。如何在不重新加载图像的情况下重新启动它？