Jquery pürüzsüz şeffaflık değişikliği. jQuery kullanarak bir web öğesinin pürüzsüz şeffaflığı nasıl yapılır

Örneğimizin sonucu.

Modern web sayfalarında animasyon uzun zamandır kabul görmüştür. Solan öğeler, uçan mesajlar, kayan resim galerileri, kullanıcı deneyimini iyileştirir ve site performansını artırır. Popüler javascript kitaplığında jQuery fadeIn (), temel animasyon işlevlerinden biridir. Blokların şeffaflığını kontrol eder.

solma efektleri

fadeIn () yöntemi, geçirilen öğenin şeffaflığını %100 olarak değiştirir. jQuery kitaplığında, opaklığı geçersiz kılmak ve böylece öğeyi "çözmek" için kullanılabilen fadeOut () işleviyle eşleştirilir.

Benzer bir etki, daha da geniş bir etki aralığına sahip olan fadeTo () yöntemiyle elde edilebilir. FadeTo (), 0 ile 1 aralığında herhangi bir şeffaflık değeri ayarlayabilir.

Yöntem sözdizimi

jQuery'deki fadeIn() yöntemi, opaklığının değiştirilmesi gereken öğe bağlamında çağrılır. Sıfırdan üç parametreye kadar alabilir:

Element.fadeIn (); element.fadeIn (süre); element.fadeIn (süre, geri arama); element.fadeIn (süre, hareket hızı, geri arama); element.fadeIn (yapılandırma);

Süre bağımsız değişkeni, animasyonun ne kadar süreceğini belirtir. Milisaniye sayısını temsil eden bir sayı veya anahtar kelimelerden biri olabilir:

• "hızlı" (200ms);
• "yavaş" (600ms);

Süre ayarlanmadıysa, varsayılan olarak 400 milisaniyedir.

Geri arama parametresi, animasyon bittikten hemen sonra çağrılacak bir işlevi belirtir. Geri arama işlevi herhangi bir parametre kabul etmez. İçindeki this değişkeni, değiştirilmekte olan DOM düğümüne atıfta bulunur.

Hareket hızı argümanı, animasyonun zamanlamasını, yani zaman içindeki hızını kontrol eder. Animasyonun başlangıcını hızlandırmak ve sonunu yavaşlatmak veya baştan sona tek tip hale getirmek için kullanabilirsiniz. Argüman değeri, anahtar kelimeyi içeren bir dizedir, varsayılan olarak bu "swing" işlevidir.

Aşağıda, fadeIn (), .block sınıfına sahip öğenin şeffaflığını bir saniye boyunca eşit olarak artıracak ve ardından konsola bir mesaj yazdıracaktır:

$ (". blok").fadeIn (1000, doğrusal, işlev () (console.log ("Animasyon tamamlandı");));

Listelenen parametreler yeterli değilse, yönteme en fazla 11 farklı ayar içerebilen bir yapılandırma nesnesi geçirilebilir.

Geri arama işlevleri

jQuery'nin fadeIn () yöntemine iletilen geri çağırma parametresi çok kullanışlı bir seçenektir çünkü özellik değişiklikleri genel kod yürütme akışını engellemeden eşzamansız olarak gerçekleştirilmektedir.

Const geri çağırma = işlev () (console.log ("Animasyon tamamlandı");); $ (". element").fadeIn (1000); geri aramak ();

Bu örnekte, işlev, öğenin tamamen görünmesini beklemeden animasyon başladıktan hemen sonra çalışacaktır.

Her şeyin amaçlandığı gibi çalışması için, animasyonun sonunu yakalamak üzere geri arama argümanını kullanın:

Const geri çağırma = işlev () (console.log ("Animasyon tamamlandı");); $ (". element").fadeIn (1000, geri arama);

Şimdi, yalnızca öğe tamamen görünür hale geldiğinde konsolda bir mesaj görüntülenecektir.

Tam şeffaflık ve öğe gizleme

Bildiğiniz gibi opacity özelliğinin sıfır değeri elemanı sayfadan kaldırmaz sadece görünmez yapar. Bir bloğu gizlemek istiyorsak bu davranış uygun değildir.

Bu nedenle, jQuery fadeIn (), fadeTo () ve fadeOut () yöntemleri, display özelliğiyle birlikte saydamlıkla çalışır. Tamamen şeffaf bir öğe, display: none kuralı kullanılarak gizlenir ve bu kural, görünmeden önce iptal edilir.

Sayfadaki seçili öğelerin saydamlık düzeyini değiştirir. Şeffaflığı sorunsuz bir şekilde değiştirmenizi sağlar. Yöntemin iki kullanım durumu vardır:

süre- şeffaflıktaki değişikliğin süresi. Milisaniye veya "hızlı" veya "yavaş" (200 ve 600 milisaniye) dize değeri olarak belirtilebilir.
opaklık- gerekli şeffaflığın değeri. 0 ile 1 arasında bir sayı olarak belirtilmelidir (0 - tam şeffaflık, 1 - şeffaflık yok).
geri aramak- şeffaflık değişikliği tamamlama işleyicisi olarak belirtilen işlev. Kendisine hiçbir parametre iletilmez, ancak işlevin içinde bu değişken, saydamlığı değiştirilen öğenin DOM nesnesini içerecektir. Bu tür birkaç öğe varsa, işleyici her öğe için ayrı olarak çağrılır.

süre- yukarıdaki açıklamaya bakın. Varsayılan olarak parametre 400'dür.
opaklık- yukarıyı görmek.
gevşeme- şeffaflıktaki değişimin dinamikleri (yürütmenin sonunda yavaşlayacak mı yoksa tam tersine hızlanacak mı). (Açıklamayı gör)
geri aramak- yukarıyı görmek.

• şeffaflığı değiştir
• bir öğeye şeffaflık ayarla
• öğeye şeffaflık seviyesini ayarla
• eleman şeffaflığı
• .solmak ()
• solmak ()

Son güncelleme: 1.11.2015

Şeffaflık efektleri, bir öğenin şeffaflığını sorunsuz bir şekilde değiştirerek onu gizlememize veya göstermemize olanak tanır. Saydamlık efektleri, fadeOut (), fadeIn (), fadeTo () ve fadeToggle () yöntemleri kullanılarak uygulanır.

fadeOut (), fadeIn () ve fadeToggle () yöntemlerinin benzer kullanımları vardır:

fadeOut / fadeIn / fadeToggle (): parametresiz yöntem

fadeOut / fadeIn / fadeToggle ([, hareket hızı] [, tamamlandı]). Süre parametresi, öğenin opaklık değişikliğinin ne kadar süreceğini belirtir. Varsayılan olarak değeri 400 milisaniyedir.

Hareket hızı işlevinin adını dize olarak alan hareket hızı parametresi. Varsayılan olarak değeri "swing"dir. 600 ve 200 milisaniyelik etki sürelerine karşılık gelen "yavaş" ve "hızlı" değerleri de kullanabilirsiniz.

Complete parametresi, animasyon bittiğinde yöntem tarafından çağrılacak bir geri çağırma işlevini temsil eder.

fadeTo yöntemi, diğer yöntemlerden farklı olarak, opaklık parametresini de kabul eder - öğenin şeffaflığının değiştirilmesi gereken bir değer alır: fadeTo (süre, opaklık [, hareket hızı] [, tamamlandı]). Opaklık değeri 0 (tamamen şeffaf) ile 1 (tamamen görünür) arasında değişir.

Diyelim ki sayfada bir görselimiz ve bu görselin şeffaflığını değiştirecek iki butonumuz var:

Görüntülemek Saklamak

fadeIn yönteminin saydamlığı, fadeOut yöntemini kullanmadan önceki değere yükselttiğine ve mutlaka 1'e yükselttiğine dikkat edin. Yani bu durumda, fadeTo yöntemi başlangıçta uygulandığı ve saydamlık 0,6 olarak değiştirildiği için, fadeIn yöntemi de şeffaflığı 0,6'ya kadar artıracaktır.