आप एक ही समय में कैसे फीका और एनिमेट करते हैं?

Question

jQuery का उपयोग करके मैं एक मूल 'टूलटिप' एनीमेशन बना रहा हूं ताकि टूलटिप एक छोटी सी एनीमेशन में दिखाई दे जिसमें वह दृश्य में फंस जाता है और साथ ही लंबवत रूप से आगे बढ़ता है।

$('.tooltip').fadeIn('slow'); 
$('.tooltip').animate({ top: "-10px" }, 'slow'); 

इसे उस तरह से या इस तरह से कर रहा:

$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow'); 

एनिमेशन एक समय में एक से चलेगा, पहले में फीका और फिर खड़ी एनीमेशन

अब तक मैं इस राशि । क्या यह एक ही समय में दोनों करने का कोई तरीका है?

Answer 1

$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow'); 

हालांकि, इस display: none तत्वों पर काम करने के लिए प्रकट नहीं होता है (fadeIn करता है)। तो, आप इस पहले से डाल करने के लिए आवश्यकता हो सकती है: एक साथ एनिमेशन करने के लिए

$('.tooltip').css('display', 'block'); 
$('.tooltip').animate({ opacity: 0 }, 0); 

Answer 2

एक और तरीका है अगर आप उन्हें अलग से (। विभिन्न कोड से जैसे) कॉल करना चाहते हैं queue उपयोग करने के लिए है। फिर, Tinister के जवाब के साथ के रूप में आप इस और नहीं fadein के लिए चेतन का उपयोग करना होगा:

$('.tooltip').css('opacity', 0); 
$('.tooltip').show(); 
... 

$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'}); 
$('.tooltip').animate({ top: "-10px" }, 'slow'); 

Answer 3

अभी भी कुछ साल के लिए देख लोगों के लिए बाद में, चीज़ें थोड़ी बदल गई हैं। अब आप के रूप में अच्छी queue.fadeIn() के लिए उपयोग इतना है कि यह इस तरह काम करेंगे कर सकते हैं:

$('.tooltip').fadeIn({queue: false, duration: 'slow'}); 
$('.tooltip').animate({ top: "-10px" }, 'slow'); 

यह display: none तत्वों पर काम कर रहा है ताकि आप कोड के अतिरिक्त दो पंक्तियों की जरूरत नहीं है को लाभ मिलता है।