Resetowanie animacji jQuery po zatrzymaniu animowania

Mam niesamowitą implementację efektu szumu z tego website, który wykorzystuje element SVG/Circle i funkcję animacji jQuery, aby utworzyć efekt marszczenia po kliknięciu przez użytkownika. Chociaż mam znajomość programowania podstawowego, wiem mniej na temat metod i funkcji JavaScript i jQuery, więc dużo czytałem z moich badań dotyczących JS i jQuery.Resetowanie animacji jQuery po zatrzymaniu animowania

Znalazłem implementację efektu fali; użyteczne, lekkie i łatwe, więc chcę odkryć i rozszerzyć kod, aby pasował do moich projektów.

Okej, więc pierwszą rzeczą, którą muszę wiedzieć, jest to, jak mogę zresetować zmiany wprowadzone przez animację, gdy przestanie ona animować? Wiem, że jest to dla ciebie proste pytanie, ale jako początkujący w JS i jQuery, jak mogę to osiągnąć? To jest wersja demonstracyjna code.

Próbowałem dodanie funkcji (jak widać na kodzie):

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

Ale nic się nie zmieniło i nadal pozostaje po zakończeniu animacji.

Każdy pomysł, co tracę?

Źródło

2016-07-18 Chain Trap

Zmień pełna zwrotna do:

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

Źródło

2016-07-18 07:46:13

Cool it works! Dziękuję Panu. –

należy użyć metody zatrzymania na przystanku animacja - https://api.jquery.com/stop/

można również wykorzystać metody clearQueue

Źródło

2016-07-18 07:46:12

mógłbyś udostępnić kod, więc mogę zobaczyć, gdzie umieścić funkcję w moim kodu? –

zamiast c.removeAttr ("style"); użyj tego $ (this) .remove(); –

W celu usunięcia "R" z atrybut stylu koła, spróbuj

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

Ref: http://api.jquery.com/css/ Ustawianie wartości właściwości stylu na pusty ciąg znaków - np. $("#mydiv").css("color", "") - usuwa tę właściwość z elementu.

lub

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

Spróbuj uruchomić fragment poniżej:

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

Źródło

2016-07-18 07:51:35 kolunar

Próbowałem, ale to też nie działa ... –

@ChainTrap Widzę, to nie działa na JSBin z 'complete: function() {c.css (" r "," ");}', Edytowałem swoją odpowiedź, callback powinien być "complete: function() {c.css (" r ", 0);}' – kolunar

zgodnie z dokumentacją jquery (http://api.jquery.com/css/) 'eg $ ("#mydiv") .css ("color", "") '- usuwa tę właściwość z elementu' oczywiście nie działa na JSBin. – kolunar

Resetowanie animacji jQuery po zatrzymaniu animowania

Odpowiedz

Powiązane problemy