Yıllar önce jQuery ile ilk kez uğraştıysanız, animasyon yapma yeteneği olabilirdi. Bu belki de jQuery'nin ilk büyük çekimlerinden biriydi. Bugünlerde CSS, oldukça iyi bir tarayıcı desteği ile animasyon da yapabilir ve daha performanslı olma eğilimindedir, bu nedenle daha az alakalı. Ancak, süper derin tarayıcı desteğine ihtiyacınız varsa, jQuery kesinlikle bir seçenektir.
JQuery'de CSS'nin nasıl değiştirileceğini zaten ele almıştık. Şöyle görünüyor:
$("#element").css(( "background-color": "red", "left": "20px" ));Bu öğeyi anında bu değerlere kaydırmak yerine, onları canlandırabiliriz. Neredeyse tamamen aynı görünüyor:
$("#element").animate(( "background-color": "red", "left": "20px" ));İşte videoda yaptığımız Kalem:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen e111fbfa7506d19034d977b17e2160a3'ü görün
Bu öğeyi tarayıcı geliştirme araçlarında incelersek, başlık altında jQuery'nin bu animasyonu nasıl yaptığını görebiliriz. Esasen, bu öğelere uygulanan satır içi stili hızla yineler
Bu videoda, onu ne kadar iyi inceleyebileceğimizi görmek için başka birinin yazdığı bazı jQuery kodlarını inceliyoruz.
CodePen'de Josh Parrett (@JTParrett) tarafından Kalem jQuery animate height: auto bakın
Bu yolculuk sırasında, otomatik yüksekliklere animasyon yapma konusunda ilginç küçük bir yan yolculuğa çıkıyoruz. Bu, ne CSS'nin ne de JavaScript'in özellikle iyi yapamayacağı bir şeydir. Zor sayıları tercih ederler. 10px - 200px arası animasyon yapmak mantıklı. 10px'i "normalde ne olursan ol" şeklinde canlandırmak o kadar kolay değildir.
Josh'un kodunda, yüksekliği otomatik olarak ayarlayan, ölçen, eski haline geri döndüren ve ardından yeni test edilen değere animasyon uygulayan akıllı bir işlev bulduk. Oldukça düzgün numara! Ham JavaScript'te ileri geri giden daha sağlam bir demo için buraya bakın.
Video bitene kadar fark etmedim, ancak jQuery bize bu konuda da yardımcı oluyor. JQuery # 40985 kullanmak için gerekçeli dosyalayın. Kullanılması .slideUp/ .slideDown/ .slideToggle- sadece eleman ile gizlenmiş olsa bile, bir şekilde çalışır display: nonebaşlatın.
CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem jQuery animasyon yüksekliği: auto'ya bakın
Çalışmamızı eski IE'de test etmek için, CodePen'e de entegre olan BrowserStack'i kullandık.