animate() dinamik css() özelliklerinde çalışmıyor

Question

Bu soruna rastladığımda animasyonlarımın çeşitli öğeler için dinamik olarak çalışmasını sağlamaya çalışıyordum (işim bitmek üzereyken de). JQuery css() yöntemi kullanarak özellikleri canlandıramıyorum. Yükseklik, genişlik ve en yüksek özellikler için kodlu değerlerle çalışan animasyonunu elde edebildim. İşte parçacık İşte:

function shrinkSection(section){ var elem = section.SectionID; $(elem).find(".content").fadeOut(500); $(elem) .animate({top: $(elem).css('top'), height: $(elem).css('height')}, 500) .animate({width: $(elem).css('width')}, {duration: 500, complete: function() { $(elem).find(".icon").fadeIn(500); $(elem).addClass("active"); } }); } 

console.log()$(elem).css('[PROPERTY]')doğru css değerini dönen IS ortaya koymaktadır

. Bunun neden işe yaramayacağına dair bir fikrin var mı?

Answer 1

Animate() yöntemi efektleri sıraya alır ve ilk efekt animasyonu ikincisini başlatmak için bitinceye kadar bekler, böylece bunlar seri olarak uygulanır. etkileri kuyrukta animasyon yerleştirmek için olmadığını gösteren Boole veya dize
A Boolean:

kuyrukta (varsayılan: true)
Tipi jquery dokümanlardan. Eğer yanlış ise, animasyon hemen başlayacaktır. JQuery 1.7'den itibaren, sıra seçeneği, bir dizeyi de kabul edebilir, bu durumda animasyon, bu diziyle temsil edilen sıraya eklenir. Özel bir sıra adı kullanıldığında, animasyon otomatik olarak başlamaz; başlatmak için .dequeue ("queuename") 'i çağırmalısınız.

$(elem).find(".content").fadeOut(500); 

if($(elem).length) 
    $(elem) 
     .animate({ top: $(elem).css('top'), height: $(elem).css('height')}, 
        { duration: 500, 
        queue: false, 
        complete: function() { alert('callback!!'); } } 
       ) 
     .animate({ width: $(elem).css('width')}, 
        { duration: 500, 
        queue: false, 
        complete: function() { 
         $(elem).find(".icon").fadeIn(500); 
         $(elem).addClass("active"); 
        } 
       }); 
else 
    alert("No elem found!!"); 

Bildirimi örnekte, size efekt uygulayabilirsiniz hangi eleman elem aslında olduğunu kontrol edebilir: İsterseniz

animasyonlar yapabileceğiniz, "paralel" olarak gerçekleşmesi jquery tarafından bulundu.
Bu şekilde olası DOM seçici problemlerini de takip edebilirsiniz.