FadeIn ve aynı zamanda nasıl canlandırıyorsunuz?

Question

jQuery'yi kullanma Temel bir 'araç ipucu' animasyonu oluşturuyorum, böylece araç ipucu dikey olarak hareket etmenin yanı sıra görüntülendiği küçük bir animasyonda görünecektir.

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

bu şekilde veya bu şekilde yapmak:

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

animasyonlar teker teker çalışacak, ilk fade ve sonra dikey animasyon

Şimdiye kadar bu var . İkisini aynı anda yapmanın bir yolu var mı?

Answer 1

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

Ancak bu (fadeIn yaptığı gibi) display: none elemanları üzerinde çalışmak için görünmüyor. Yani, bu önceden koymak gerekebilir: (. Örn farklı koddan)

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

Answer 2

bir başka yolu eşzamanlı animasyonlar yapmak Bunları ayrı olarak aramak istiyorsanız queue kullanmaktır. Yine, Tinister cevabı olduğu gibi bu değil fadeIn için animate kullanması gerekir: hala birkaç yıl görünümlü insanlar için

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

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

Answer 3

sonra, işler biraz değişti.

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

Bu kod fazladan iki satırlık gerek kalmaz display: none elemanları üzerinde çalışan yararı vardır: böyle çalışacak şekilde Artık hem queue.fadeIn() için kullanabilirsiniz.