Repeat Jquery . Animate() after clicking the button

Question

I have the following code:

$(document).ready(function(){

	$('#cadastre-se').click(function(){
  	  $('.icon-cracha').stop(true, true).delay(500).animate({top: "+0"},1000);
  });
  
});

.icon-cracha{
  width:100px;
  height: 100px;
  background-color:black;
  border-radius: 100%;
  position:absolute;
  top:-100px;
}

button{
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="icon-cracha"></div>  

<button id="cadastre-se" name="submit" class="btn">Próximo</button>

jsfiddle

I would like that effect to repeat every time I click the button próximo. Because here in my project it only happens in the first step of the registration, in the other the ball already appears right without effect.

Answer 1

Do it like this, declare his top negative, so the animation can always appear.

    $('#cadastre-se').click(function(){
      $('.icon-cracha').css('top','-100px');
      $('.icon-cracha').stop(true, true).delay(500).animate({top: "+0"},1000);
  });

See and tell me if that’s what you need.

I made an example to show. https://jsfiddle.net/rboschini/ensdzre1/