Ripristina animazione jQuery quando smette di animare

Ho ottenuto un'impressionante implementazione a effetto a catena da questo website che utilizza l'elemento SVG/Cerchio e una funzione di animazione jQuery per creare l'effetto a incastro sul clic dell'utente. Anche se ho una conoscenza della programmazione di base, so meno di JavaScript e dei metodi/funzioni di jQuery, quindi ho letto molto dalle mie ricerche su JS e jQuery.Ripristina animazione jQuery quando smette di animare

Ho trovato l'implementazione dell'effetto a catena; utile, leggero e facile, quindi voglio esplorare ed espandere il codice per adattarlo ai miei progetti.

Ok, quindi la prima cosa che devo sapere qui è, come posso ripristinare le modifiche apportate dall'animazione quando smette di animare? So che questa è una domanda semplice per te, ma come principiante di JS e jQuery, come posso ottenerlo?

Ecco la demo code per vedere cosa sta realmente accadendo qui.

Ho provato ad aggiungere la funzione (come visto sul codice):

complete : function(){c.removeAttr('style');}

ma nulla è cambiato e rimane ancora dopo l'animazione termina.

Qualche idea di cosa mi manca?

fonte

2016-07-18 Chain Trap

Change callback completo:

complete : function() { $(this).remove(); }

fonte

2016-07-18 07:46:13

Cool funziona! Grazie Signore. –

Si dovrebbe utilizzare il metodo di arresto per l'arresto di animazione - https://api.jquery.com/stop/

è anche possibile utilizzare il metodo clearQueue

fonte

2016-07-18 07:46:12

Potrebbe condividere il codice in modo che posso vedere dove mettere la funzione in mio codice? –

anziché c.removeAttr ('stile'); usa $ (this) .remove(); –

Al fine di rimuovere "r" dalla attributo di stile della cerchia, prova

complete : function(){c.css("r", "");}

Rif: http://api.jquery.com/css/ Impostazione del valore di una proprietà di stile su una stringa vuota, ad es. $("#mydiv").css("color", "") - rimuove quella proprietà da un elemento.

complete : function(){c.css("r", "0");}

provare a eseguire il frammento di seguito:

(function(){ 
 
    
 
    $(".button").on("click", function(e){ 
 

 
     var yOffset = e.pageY - $(this).offset().top; 
 
     var xOffset = e.pageX - $(this).offset().left; 
 
     var self = this; 
 
      
 
     var xPos = parseInt(xOffset); 
 
     var yPos = parseInt(yOffset); 
 

 
     $(this).find("svg").remove(); // Remove existing animation changes 
 
     $(this).append('<svg><circle cx="'+xPos+'" cy="'+yPos+'" r="'+0+'"></circle></svg>'); 
 
      
 

 
     /* Make the animation of SVG - Circle */ 
 
     var c = $(self).find("circle"); 
 
     c.animate(
 
      { 
 
       "r" : $(self).outerWidth() 
 
      }, 
 
      { 
 
       easing: "easeOutQuad", 
 
       duration: 500, 
 
       step : function(val){}, 
 

 
       /*------------------------- 
 
       THIS FUNCTION SHOULD WORK 
 
       --------------------------*/ 
 
       complete : function(){c.css("r", "0");} 
 
      } 
 
     ); 
 
    }); 
 
}());

.button { 
 
position: relative; 
 
display: inline-block; 
 
height: 40px; 
 
padding: 0 20px; 
 
margin: 0; 
 
background: transparent; 
 
border: none; 
 
color: rgb(0,0,0,0); 
 
font-size: 20px; 
 
font-weight: 900; 
 
text-align: center; 
 
text-transform: uppercase; 
 

 
-webkit-tap-highlight-color: transparent; 
 
} 
 

 
.button:hover { 
 
background-color: rgba(158,158,158,0.10); 
 
} 
 

 
.button:active, 
 
.button:focus { 
 
background-color: rgba(158,158,158, 0.30); 
 
outline: 0; 
 
} 
 

 

 
/* SVG - Circle for the ripple effect */ 
 
.button svg { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
height: 100%; 
 
width: 100%; 
 
} 
 

 
.button circle { 
 
fill: rgba(0,0,0,0.50); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width"> 
 
<title>Reset jQuery animation when it stops animating</title> 
 
</head> 
 
<body> 
 
<button class="button">Button</button> 
 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> 
 
</body> 
 
</html>

fonte

2016-07-18 07:51:35 kolunar

L'ho provato ma non funzionava anche ... –

@ChainTrap Vedo, non funziona su JSBin con 'complete: function() {c.css (" r "," ");}', Ho modificato la mia risposta, il callback dovrebbe essere 'complete: function() {c.css (" r ", 0);}' – kolunar

secondo la documentazione di jquery (http://api.jquery.com/css/) 'es $ ("#mydiv") .css ("color", "") '- rimuove quella proprietà da un elemento' ovviamente non funziona su JSBin. – kolunar

Ripristina animazione jQuery quando smette di animare

risposta

Problemi correlati