.animate

Question

पहले एक बार देख ले:

बिल्ली एक वक्र में एक्स पर ले जाने की जरूरत है। (तीर देखें)

जब बिल्ली एक्स को हिट करती है, तो उसे 10 सेकंड रहना चाहिए, और उसके बाद बिल्ली को वक्र में फिर से वापस जाना चाहिए, और दोहराना चाहिए।

मैं इस कोड के साथ इसे करने की कोशिश:

function curve() { 
    $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() { 
     $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() { 
      curve(); 
     }); 
    }); 
} 

curve(); 

लेकिन बिल्ली इस तरह बढ़ रहा है:

वहाँ एक रास्ता बिल्ली वक्र के इस प्रकार में स्थानांतरित करने के लिए प्राप्त करने के लिए है ?

Answer 1

आप, कि प्राप्त करने के लिए आसान एक यौगिक आंदोलन करके उपयोग कर सकते हैं:

function curve() { 
    $('#cat').delay(10000).animate({top: "+=20px", left: "+=20px"}, { 
     duration: 500, 
     specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'}, 
     complete: function() { 
     $('#cat').animate({top: "-=20px", left: "+=20px"}, { 
      duration: 500, 
      specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'}, 
      complete: function() { 
      // repeat the other way around. 
      }}); 
     } 
    }); 
} 

यह jQuery 1.4 के बाद से काम करता है, के अनुसार jQuery docs और उल्लेख किए गए easings को jQuery UI की आवश्यकता होती है (लेकिन केवल Effect Core मॉड्यूल)। प्रत्येक .animate() कॉल पूर्ण सर्कल पथ की एक चौथाई के लिए कॉल करता है, और easeInQuad बनाम easeOutQuad बनाता है, पथ सीधे नई स्थिति के बजाय एक परिपत्र पथ की तरह दिखता है।

Answer 2

http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

"jQuery रेडियल गति" googling द्वारा इस मिले

Answer 3

एक छोटे से स्क्रिप्ट सिर्फ सीधी रेखा में गमन नहीं एनीमेशन के लिए, नहीं है, pathAnimator बुलाया