jQuery slideUp() alt dolgu değeri azaltılmıyor

Question

this fiddle'da düğmelerden birine tıkladığınızda, kapağın yavaşça yukarı kayar. Zirveye ulaştığında, tamamen yukarı doğru kaymadığını göreceksiniz. Müfettişe bakarsanız, li'un alt yastığı, slideUp() işlemi sırasında beklediğiniz gibi küçülmez.

Neden olursa olsun?

Not: Kaydırmak sorunu daha iyi göstermek için çok yavaştır.

Not 2: jQuery kitaplığını 1.7.2 olarak değiştirdiğimde, aslında düzgün çalışıyor. İlginç.

FWIW: jQuery

ile ticket dosyalanan

Answer 1

DÜZENLEME:

Bu gerileme jQuery 1.8.1 giderilmiştir - fiddle.

---

Zaten fark ettiğiniz gibi, bu v1.8.0'daki başka bir hatadır.

Bu fiddle, paddingBottom'un slideUp 'un animasyonunun en sonunda çıkarıldığını gösterir. paddingBottom sübtil, ince paddingBottom çıkarma, geri arama içinde slideDown aradığınızda, paddingBottom anında geri eklenir (nasıl çıkarılmış olduğu için simetrik olarak). Fiddle

Düzeltme serbest bırakılıncaya kadar beklemek istemiyorsanız ve 1.7.2'ye yükseltmek istemiyorsanız, 1.7.2 olarak davranması için geçici bir geçici çözüm CSS özellik haritasını geçmek .animate:

function next() { 
    var q = $(this).parents('li'); 
    q.data('originalDimensions', { 
     borderTopWidth: q.css('borderTopWidth'), 
     paddingTop: q.css('paddingTop'), 
     height: q.css('height'), 
     paddingBottom: q.css('paddingBottom'), 
     borderBottomWidth: q.css('borderBottomWidth') 
    }); 
    q.animate({ borderTopWidth:0, paddingTop:0, height:0, paddingBottom:0, borderBottomWidth:0 }, 5000, function(){ 
     $(this).animate($(this).data('originalDimensions'), 5000); 
    }); 
} 

Fiddle

en biletinizi kadar oy ve 1.8.1 sürümünde düzeltilmesini ümit edelim.

düzenlemek: bu daha sonraki bir zamanda ve farklı bir kapsamda kullanılabilecek bu şekilde eleman en .data() yılında originalDimensions depolamak için geçici çözümü güncellendi. Aynı anda birden fazla öğelerin animasyonunun için .data() ayarlamak için .each yinelemeyi kullanın:

q.each(function() { 
    var $this = $(this); 
    $this.data('originalDimensions', { 
     borderTopWidth: $this.css('borderTopWidth'), 
     //... 
    }); 
}); 
q.animate({ borderTopWidth:0, /*...*/ }, 5000, function() { 
    $(this).animate($(this).data('originalDimensions'), 5000); 
}); 

Fiddle