How to play animated GIF from the beginning onclic

问题:

I have two divs : one for the static image(jpg) and the other one for the animated image (gif)

Like this:

<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>

And i use this JavaScript to perform onClick function so like that when i click over the static div.. disappear with css display:none and my animated div comes up with the gif that i want to display. My problem is that when my website load... the animated div that is hiding the GIF is playing the gif without stoping ... i want to be able to when i click over the static image it plays the gif from the beginning.

How can i accomplish this?

<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>