Repeat JQuery .animate () after clicking the button

Question

Repeat JQuery .animate () after clicking the button

Navigation

#1 by (3 votes)

0

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><divclass="icon-cracha"></div>  

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

jsfiddle

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

jquery jquery-animate

asked by anonymous 16.12.2015 / 18:16

1 answer

Scrollbar on Windows Forms screen Sidebar via Controller - Laravel 5.1 + AdminLTE 2

score 3 · Accepted Answer

Do so, declare the top of it 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);
  });

Go and tell me if this is what you need.

I made an example to show. link