Javascript 如何从onclick函数开始播放动画GIF

我有两个div：一个用于静态图像（jpg），另一个用于动画图像（gif）

像这样：

<div class="badge-animated-container-static gif-post "><img class="badge-item-img" alt="Nunca dos viajes" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/11/nevertwotrips.jpg" />
<span class="play">Play</span></div>
<div class="badge-animated-container-animated hide"><img class="badge-item-animated-img" alt="Nunca dos viajes" src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/11/nevertwotrips.gif" /></div>

玩

我使用这个JavaScript来执行onClick函数，就像我单击static div时那样。。消失与css显示：无和我的动画div拿出了我想显示的gif。我的问题是，当我的网站加载。。。隐藏GIF的动画div正在播放GIF而不停止。。。我希望当我点击静态图像时，它能从一开始播放gif

我怎样才能做到这一点

<script>
$('.badge-animated-container-static').click(function() {
$(this).addClass('hide');
$('.badge-animated-container-animated').removeClass('hide');
});

$('.badge-animated-container-animated').click(function(){
$(this).addClass('hide');
$('.badge-animated-container-static').removeClass('hide');
});
</script>

$（'.badge动画容器静态'）。单击（函数（）{
$（this.addClass（'hide'）；
$（'.badge animated container animated'）.removeClass（'hide'）；
});
$（'.badge animated container animated'）。单击（函数（）{
$（this.addClass（'hide'）；
$（'.badge动画容器静态'）。removeClass（'hide'）；
});

我认为这是你无法控制的。按键应该是让浏览器仅在单击后“加载”gif。您可能有幸直接更改

src

属性（看一看），但您应该将GIF“raw”数据预加载到js变量中，并将

src

设置为该原始数据，而不是简单的文件URL。这超出了你的问题。是的，但假设我有一堆图片。。我可以这样做吗（看大写字母）$（e） .hover（function（）{$（this）.attr（'src'，src.replace（'STATIC CLASS IMAGE'，'ANIMATED GIF IMAGE CLASS'））；我想将myimage.jpg替换为myanimatedgif.gif。静态类替换为.animated类。您可以随意构造名称，这与此无关。我知道，但我说的是在静态图像所在的位置使用静态类，在动画图像所在的位置使用动画类……而不是像staticimage那样使用完整路径url001.jpg或animated-image200.gif..因为我有太多的图像，我不想一个接一个，所以我希望能够使用我的div类获取url