如何从一开始的onclick功能播放动画GIF

Question

我有两个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功能，所以当我点击静态div时...用css display：none消失，我的动画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>