एनिमेटिंग बंद होने पर jQuery एनीमेशन रीसेट करें

मुझे website से एक अद्भुत लहर प्रभाव कार्यान्वयन मिला है जो उपयोगकर्ता-क्लिक पर लहर प्रभाव बनाने के लिए एसवीजी/सर्किल तत्व और एक jQuery एनीमेशन फ़ंक्शन का उपयोग करता है। हालांकि मुझे बुनियादी प्रोग्रामिंग का ज्ञान है, मुझे जावास्क्रिप्ट और jQuery विधियों/कार्यों के बारे में कम पता है, इसलिए मैंने जेएस और jQuery के बारे में अपने शोध से बहुत कुछ पढ़ा है।एनिमेटिंग बंद होने पर jQuery एनीमेशन रीसेट करें

मुझे लहर प्रभाव कार्यान्वयन मिला; उपयोगी, हल्के वजन और आसान इसलिए मैं अपनी परियोजनाओं पर फिट करने के लिए कोड का पता लगाने और विस्तार करना चाहता हूं।

ठीक है, तो सबसे पहले मुझे यह जानने की ज़रूरत है कि एनीमेशन द्वारा किए गए परिवर्तनों को मैं रीसेट कैसे कर सकता हूं जब यह एनिमेटिंग बंद हो जाता है? मुझे पता है कि यह आपके लिए एक साधारण सवाल है लेकिन जेएस और jQuery में एक शुरुआत के रूप में, मैं इसे कैसे प्राप्त कर सकता हूं?

यहां वास्तव में क्या हो रहा है यह देखने के लिए डेमो code है।

मैं समारोह जोड़ने (के रूप में कोड पर देखा) की कोशिश की:

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

लेकिन कुछ भी नहीं बदला है और यह अभी भी के बाद एनीमेशन समाप्त होता रहता है।

कोई विचार क्या मैं मिसिन हूं?

स्रोत

2016-07-18 Chain Trap

बदलें पूरा कॉलबैक करने के लिए:

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

स्रोत

2016-07-18 07:46:13

कूल यह काम करता है! धन्यवाद महोदय। –

आप एनीमेशन रोक के लिए रोक विधि का उपयोग करना चाहिए - https://api.jquery.com/stop/

आप भी उपयोग कर सकते हैं clearQueue विधि

स्रोत

2016-07-18 07:46:12

आप कोड का हिस्सा सकता है तो मैं देख सकता हूँ जहाँ मेरे कोड पर समारोह जगह:

या

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

नीचे टुकड़ा चलाने की कोशिश करें? C.removeAttr ('शैली') के बजाय –

; इस $ (इस) का उपयोग करें .remove(); –

आदेश में से "आर" को दूर करने के सर्कल की शैली विशेषता,

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

रेफरी: http://api.jquery.com/css/ एक स्टाइल प्रॉपर्टी का मान एक खाली स्ट्रिंग पर सेट करना - उदा। $("#mydiv").css("color", "") - उस तत्व को किसी तत्व से हटा देता है।

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

स्रोत

2016-07-18 07:51:35 kolunar

मैंने कोशिश की लेकिन यह भी काम नहीं किया ... –

@ChainTrap मैं देखता हूं, यह जेएसबीन पर 'पूर्ण: फ़ंक्शन() {c.css ("r", "");} 'के साथ काम नहीं करता है, मैंने अपना जवाब संपादित कर लिया है, कॉलबैक 'पूर्ण होना चाहिए: फ़ंक्शन() {c.css ("r", 0);} ' – kolunar

jquery के दस्तावेज़ (http://api.jquery.com/css/) के अनुसार 'जैसे $ ("#mydiv") .css ("रंग", "") '- उस तत्व को तत्व से हटा देता है' जाहिर है यह जेएसबीन पर काम नहीं करता है। – kolunar

एनिमेटिंग बंद होने पर jQuery एनीमेशन रीसेट करें

उत्तर

संबंधित मुद्दे