كيف fadeIn ويديروا في نفس الوقت؟

Question

وعن طريق مسج أنا خلق الأساسي "تلميح" الرسوم المتحركة بحيث سيظهر تلميح الأدوات في القليل من الرسوم المتحركة الذي يتلاشى في طريقة العرض وكذلك التحرك عموديا.

وحتى الآن لدي هذا:

$('.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 ل.fadeIn() كذلك حتى أنه سوف يعمل مثل هذا:

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

وهذا له فائدة من العمل على عناصر display: none بحيث لا تحتاج إلى خطين إضافية من التعليمات البرمجية.

Answer 3

وهناك طريقة أخرى للقيام الرسوم المتحركة في وقت واحد إذا كنت ترغب في استدعاء كل منها على حدة (على سبيل المثال من رمز مختلف) هو استخدام queue. مرة أخرى، كما هو الحال مع الجواب Tinister وعملتم لاستخدام الأرواح لهذا وليس fadeIn:

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

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