2010-07-19 12 views
6

मेरे पास सभी जगहों पर एनिमेशन (JQuery Animation) वाला एक वेब पेज है। एक सामान्य एनीमेशन अनुक्रम में एक ही समय में स्वतंत्र रूप से एनिमेटिंग तीन या चार ऑब्जेक्ट हो सकते हैं। जिस मुद्दे का मैं सामना कर रहा हूं वह यह है कि एनिमेशन की कतार का अनुमान लगाने योग्य नहीं है। कुछ एनिमेशन एक साथ चल रहे हैं जबकि कुछ अन्य नहीं हैं।एक साथ चलाने के लिए jQuery एनिमेशन को कैसे बल दें?

मैं

setTimeout(function(){ 
     //animations 
    }, delay); 

की तरह कुछ कर रहा हूँ कई स्थानों में बस कोशिश करते हैं और समूह के लिए एनिमेशन। इसका उपयोग करते समय भी, कोड ब्लॉक के अंदर कुछ एनिमेशन एक साथ नहीं चल रहे हैं।

क्या एनीमेशन को एक ही समय में चलाने के लिए मजबूर करने का कोई तरीका है? क्या एनिमेशन के साथ कतार भरने का कोई तरीका है और फिर एक ही समय में निष्पादित करें? क्या कोई चीज वास्तव में काम करती है इस बारे में कोई व्यापक दस्तावेज है?

संपादित करें: Sample code चेतावनी: कोड गन्दा है

सवाल कोड तुम्हें कैसे पता जो एनिमेशन के साथ चलाने के लिए जा रहे हैं है में दिख रही है?

+6

कृपया हमें अपना कोड दिखाएं। – SLaks

+0

http://pastebin.com/Qns9xcuP चेतावनी: कोड गन्दा है। – Niyaz

उत्तर

8

यह रन एक साथ (लेकिन पहले से उपलब्ध नहीं है, तो वस्तु पर चल रहे एक एनिमेशन):

$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800); 

और आप 100% यकीन है कि यह सही दूर (कतार नोटिस: गलत) एनिमेटेड है होना चाहते हैं:

$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800}); 

आप यह भी कर सकते हैं। (यह अभी भी एक साथ चल जाएगा)

$('.blabla .1') 
    .animate({fontSize: 20},{queue:false,duration:800}) 
    .animate({opacity: 0.4},{queue:false,duration:800}); 

यह एक के बाद एक चलाता है।

$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800); 

तो यह

$('.blabla .2').animate({opacity: 0.3}, 800, function() { 
    $('.blabla .3').animate({opacity: 0.3}, 800); 
}); 

मुझे आशा है कि आपके सवाल का जवाब है।

सभी संपादनों के लिए खेद है, मैं यहां नया हूं।

+0

एनीमेशन को तुरंत लॉन्च करने के लिए सेटअप करने के बाद आप .dequeu() का भी उपयोग कर सकते हैं – Debianita

-1

step विकल्प का उपयोग करें। आप इसे एक फ़ंक्शन देते हैं, और वर्तमान एनीमेशन के प्रत्येक चरण के बाद, यह उस फ़ंक्शन को निष्पादित करेगा। इस प्रकार आप वहां एनिमेट कर सकते हैं। Link to docs

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