html - jQuery .animate() -

मेरे पास एक बेला है:

बेला में, update () यह .scroll के सीएसएस को कृत्रिम रूप से पूरे तत्व को स्क्रॉल करने में परिवर्तित करता है यह ठीक काम करता है:

  $ ('। Scroll')। Css ({"transform": "अनुवाद 3 डी (0, -" + newHeight + "px, 0)", "-webkit- रूपांतरण ":" अनुवाद 3 डी (0, - "+ नया हैइट +" पीएक्स, 0) "});   
 हालांकि जैसे ही मैं  .animate ()  का उपयोग करता हूं, कुछ भी नहीं होता है:  
  $ ('। Scroll')। ({0 - "+ newHeight +" px, 0) "}, 800) (" ट्रांसफॉर्मेशन ":" अनुवाद 3 डी (0, - "+ नई हैइट +" पीएक्स, 0) "," वेबकीट-ट्रांसफॉर्म ":" अनुवाद 3 डी (0, - " ;   
 वहां एक समान सवाल है लेकिन यह सिर्फ इसलिए है जहां उन्होंने  px    
 
 
 मैं आपको सीएसएस ऐनिमेशन का उपयोग करने का सुझाव देता हूं, यदि  translate3d  उपलब्ध है तो यह हमेशा उपलब्ध होना चाहिए।  
  $ (' 'स्क्रॉल')। सीएसएस ({'वेबकैट-संक्रमण-अवधि': '350ms', 'संक्रमण-अवधि', '350ms'});   
 असल में, आपका कोड काम नहीं कर सकता क्योंकि चेतन मूलभूत कार्य की तरह एक शक्तिशाली है। यह जो आप संपत्ति के रूप में दिया है, और इस मूल्य के लिए प्रयास करने की कोशिश करेंगे, लेकिन आपने कुछ अजीब मूल्य दिया है जो एक संख्या नहीं है, बल्कि कुछ संख्याओं वाला एक स्ट्रिंग  translate3d (x, y, z) , JQuery यह कैसे संभाल करने के लिए पता नहीं है।  
 अगर आपको वास्तव में जावास्क्रिप्ट (उदाहरण के लिए अंतिम कॉलबैक के लिए) में करने की ज़रूरत है, तो मेरा सुझाव है कि आप निम्न विधि का उपयोग कर सकते हैं। मैंने इसे वास्तव में सरल बना दिया है, यदि यह महत्वपूर्ण है, तो इसे बेहतर बनाने के लिए इसे बेहतर बनाने के लिए jQuery FX और प्रभाव स्टैक से हो सकता है।  
  var animateTranslate3d (el, values, period, complete, oldValues) {var $ El = $ (el), चरण-अवधि = 10, शेष चरण = गणित.फ़्लूर (अवधि / चरण अवधि), नए मूल्य; // अनुकूलन, पहले चरण के बाद, पुरानी मूल्यों को फिर से पुराने मूल्यों की गणना करने की आवश्यकता नहीं है || (पुरानी मूल्यएं = ($ el.css ('परिवर्तन') || $ el.css ('वेबकिट-ट्रांसफॉर्मेशन')) 'अनुवाद 3 डी (0,0,0)')। मैच (/ अनुवाद 3 डी \ ((\ \) ।।।। *, (\ घ) *, (\ घ) * \) /)) बदलाव (); नए मूल्य = [(मान [0] - पुरानी मूल्य [0]) / शेष चरण, (मूल्य [1] - पुरानी मूल्यएं [1]) / शेष चरण, (मान [2] - पुरानी मूल्यों [2]) / शेष चरण]; $ El.css ('परिवर्तन', 'अनुवाद 3 डी (' + नए मूल्य [0] + ',' + नए मूल्य [1] + ',' + नए मूल्य [2] + ')'); // एनीमेशन समाप्त हो गया अगर (अवधि & lt; = 0) रिटर्न (पूर्ण प्रकार === 'फ़ंक्शन' & amp; amp; amp; amp; amp; amp; amp; amp; amp; पूर्ण;); // चलिए एक कदम के बाद अगले कदम करते हैं। देरी सेट setime (function () {animateTranslate3d (el, values, duration - stepDuration, पूर्ण, newValues)}, stepDuration)} animateTranslate3d ('। Scroll', [0, -newHight, 0 ], 800);   
 मुझे बताओ कि क्या यह सही ढंग से काम करता है;), शायद आपको इसे थोड़ा डिबग करना होगा ...