JQuery ile animasyon uygulama

Animasyonlu efektler jQuery Bildiğimiz animasyonlar değil, yani bir çizime hareket vermeyeceğiz, kafa karışıklığına yol açabileceği için bunu netleştirmek önemlidir. Bu animasyonlu efektler, öğelerin geçişlerinin oluşturulma şekline atıfta bulunur. GÜNEŞ, tarayıcının bir köşesinden yavaşça hareket edebilen veya binlerce parçaya ayrılarak kaybolabilen bir öğe.
İlk bakışta bizim için yararlı gibi görünebilirler, sonunda bir öğenin ortaya çıkmasını veya kaybolmasını istiyorsak, bunun nasıl olduğu bizim için önemli olmayabilir, ancak maddenin davranışını inceleyenler için. Kullanıcı arayüzleri Bu, kullanıcının ruh halini ayarlayabileceği veya görseli biraz daha çekici hale getirmek için ince bir yol olarak gösterilebileceği için çok önemlidir.
Animasyon efektlerinin kullanımında suistimal ve abartı yapanlar ve arayüzü o kadar fazla yükleyenler var ki, ağır veya güvenilmez hale geliyor ve sistemi kullanırken kullanıcıyı mağdur ediyor, bu yüzden minimum vicdan ve vicdan sahibi olmak gerekiyor. Bu tür efektleri uygularken ölçülü olun.
farklı olduğunu bilmek önemlidir animasyon türleri Yaptığımız aramadan bir takım kontrol edilebilir seçenekleri var, süresini kontrol edebiliyoruz, böylece efektin kullanılabilirliği etkileyip etkilemediğini kalibre edebiliyoruz ve sürdüğü zamana bağlı olarak detaylandırabiliyor ve istenen etkiyi elde ediyoruz. ayrıca yürütülecek işlevi veya yöntemi de gösterebilir. geri çağırmak animasyonun sonunda, örneğin, artık orada olmadığında bir düğmeyi ortadan kaldırırsak, kullanıcıya bir mesaj gönderen bir yöntem yürütülür.
Sahip olduğumuz diğer bir seçenek de nesne haritası kullandığımız animasyon efektinin gelişmiş veya özel seçeneklerini tanımladığımız, ancak bu en çok çok özel ve gelişmiş bir şey yapmak istediğimizde. Bu seçenekleri kullanmak için sözdizimi aşağıdaki gibidir:

 $ (seçici) .etki (süre); $ (seçici) .effect (süre, Geri Arama işlevi); $ (seçici) .effect (functionCallBack); $ (seçici) .effect (mapObjects); 

Her satırın standart animasyonlarda uygulayabileceğimiz olası varyasyonların her birine karşılık geldiğini gördüğümüz için, bazı animasyonların belirli bir özelliği olabilir, ancak bu eğitimde göreceğimizlerde bununla çalışacağız.
Aklımıza gelen en çok kullanılan ve en kullanışlı efektlerden biri öğeleri göstermek ve gizlemek ve bunların uygulanması oldukça basit efektler olduğu ortaya çıktı, bu yüzden onları örnek olarak kullanacağız.
göster () ve gizle ()Bu hedeflere ulaşmamızı sağlayan yöntemler şunlardır: Göstermek() Y saklamak (), İngilizce adlarının eyleme karşılık geldiğini gördüğümüz için, ilki göster ve ikinci için gizle, bunlar bizim içindeki herhangi bir öğeye uygulanabilir. GÜNEŞ, bu yüzden oldukça pratik ve kullanışlıdırlar.
Süreyi ve bir fonksiyona yapılan çağrıyı kullanacağımız küçük bir animasyon yapacağız. geri çağırmak yürütme sırasında, efektleri uygulayacağız Göstermek() Y saklamak () ve böylece bunların nasıl kullanıldığını öğrenebiliriz.
Aşağıdaki kodda ilk etapta yaptığımız şeyin kütüphaneyi nasıl dahil ettiğini görüyoruz. jQuery birinden CDN yeterli, bununla yerel olarak depolamaktan kaçınıyoruz ve böylece tarayıcı önbelleğinden yararlanacağız.
Sonra iki blok tanımlarız adlandırılmış madde 1 Y eleman2 sırasıyla, ilkinin gizlendiği ve ikincisinin görünür olduğu ve son olarak, işlevi yürüten click olayında uyguladığımız start yazan bir düğmemiz var. teşvik etmek().
İşlev teşvik etmek() önce animasyonu uygula Göstermek() için madde 1 ve ona 1 saniyeye eşit olan 1000 mili-saniye değerini verir ve buna bir ekliyoruz. geri çağırmak efekti uyguladığımız yer saklamak () bizim eleman2 ve konsol başına bir mesaj oluşturur.
Animasyonun içinde saklamak () neye başvuruyoruz eleman2 biz yarattık geri çağırmak konsoldan da bir mesaj yazacağız. İlk örneğimizin koduna bakalım:

 Animasyonlar
Bu bizim ilk gizli öğemiz

Animasyonu çalıştırmak için düğmesine tıklayın
Başlangıç 

Şimdi tarayıcımızda nasıl göründüğüne bakalım, bir sonraki resimde göreceğiz HTML Herhangi bir işlem yapmadan önce, nasıl olduğuna bir bakalım. madde 1 gösterilmemiş:

Şimdi aşağıdaki resimde butona tıkladıktan sonra ne olacağını göreceğiz Başlangıç, şimdi gizli öğeyi gördüğümüzü fark edeceğiz ve konsolda iki mesajımız olacak, örneği canlı yaparlarsa ayrıca bir öğenin önce nasıl göründüğünü ve bir saniye sonra diğerinin nasıl kaybolduğunu görecekler:

Basit bir şekilde belgemizdeki öğeleri göstermeye ve gizlemeye hayat verdik. HTML.
Durumları değerlendirerek ve yöntemleri kullanarak bunu yapmak kolay olsa da, bir düğmenin bir öğeyi veya bir grup öğeyi gösteren ve gizleyen bir anahtar olarak çalışmasını istediğimiz zamanlar vardır. Göstermek() Y saklamak (), Gerçek şu ki, bu kadar basit bir şey için çok fazla kod üretecektik, bu yüzden jQuery bunu düşündüler ve bize yöntemi sağladılar geçiş ().
toggle() yöntemi ne işe yarar?Bu yöntemin yaptığı şey, öğenin mevcut durumunu değerlendirmektir ve bu nedenle, görünürse onu gizler ve gizlenmişse, anahtar tipi davranışın gösterdiği gibi gösterir. En iyi yanı, bu yönteme farklı animasyon seçeneklerini ekleyebilmemizdir, süresi ve yapma olasılığı ile. geri çağırmak.
Şimdi toggle() metodu hakkında öğrendiklerimizi uygulamaya koyduğumuz bir örnek oluşturalım, aşağıdaki kodu görelim:

 Animasyonlar
Geçiş () efektinin yürütülmesinin sonucu.

Başlangıç 

Aşağıdaki kodda nasıl bir div oluşturduğumuzu göreceğiz. madde 1 hangi başlangıçta gizlidir, sonra bir düğmemiz var Başlangıç hangi tıklatıldığında canlandırma işlevini çağıracak, yönteme sahip olacak geçiş () elemana uygulanır ve ilk anda görünecek ve konsol başına bir mesaj gösterecektir.
Bu kodun tarayıcı tarafından ilk durumuna bakalım, sadece butonumuz olduğunu ve konsolda hiçbir şey olmadığını fark edeceğiz:

Şimdi butona tıklandığında gizli öğenin nasıl göründüğünü ve konsol üzerinden mesajı bize nasıl yansıttığını görelim:

Son olarak tekrar butona tıklarsak eleman gizlenecek ve sayıyı gördüğümüzde fark ettiğimiz konsolda mesaj tekrarlanacaktır. üç yanında, olayın kaç kez tetiklendiğini gösterir.

Evet tamam Göstermek() Y saklamak () Etkililer, ilk bakışta biraz basit görünebilirler, bu yüzden farklı animasyonlar yapmamıza yardımcı olan başka yöntemlerimiz var, bu durumda bahsediyoruz. solmak Y kaymak solma ve kaymaya tekabül eden, birincisi görünme gibi bir etkiye sahipken, ikincisi ekranın bir kenarından veya öğenin kabından kayar.
Aşağıdaki listede eşdeğerlerini görelim Göstermek() ve saklamak ():
fadeIn () ve slideIn ()Öğeleri gösterme etkilerine karşılık gelirler, yani Göstermek().
fadeOut ve slideOut ()Öğeleri gizleme etkilerine karşılık gelirler, yani saklamak ().
fadeToggle () ve slideToggle ()Üçüncü bir durum daha vardır ve bu, anahtar tipi etkilere karşılık gelen ve eşdeğerdir. geçiş ().
Bir alıştırma olarak, nasıl çalıştıklarını ilk elden görebilmeniz için bu yeni yöntemleri kullanarak örnekleri tekrar gözden geçirmenize izin veriyoruz.
Bununla bu öğreticiyi bitiriyoruz, öğelerimizi ince ve akıllı bir şekilde canlandırmayı öğrendik, bu efektleri çok uzun animasyon süreleri yerleştirme yolunda kötüye kullanmamak önemlidir, çünkü elde edeceğimiz şey kullanıcıyı rahatsız etmek ve Kullanılabilirliği her şeyden önce korumamız gerektiğini hatırlayarak işlerini erteleyin.