Pürüzsüz arka plan rengi değişimi. Arka plan rengi nasıl değiştirilir: jQuery ile sözde sınıftan sonra? Jquery rengini değiştir

Bu derste, fare imlecinin nesnenin üzerine getirilmesi sonucunda nesnenin arka planının düzgün bir şekilde değişmesi efektinden bahsedeceğiz.
Öncelikle muhtemelen alışmış olduğunuz gibi (eğer jQuery kütüphanesini ilk kullanışınız değilse) jQuery’yi sitemize bağlıyoruz.
JQuery'nin yanı sıra jQuery UI'ye de ihtiyacımız var.

Eğer jQuery prensiplerine aşina iseniz, sayfanın ana içeriği yüklenmeden önce yüklenecek şekilde başlığa çağrı kodunu, bu durumda renk değişimi animasyonunu yerleştirmemiz gerektiğini hatırlamalısınız. $(document).ready(function() ( // animasyon çağrı kodunuzu buraya koyun ));

HTML

İşte bir html işaretleme örneği.

Bir öğenin arka plan rengini değiştirme Fareyle üzerine gelindiğinde renk değiştirme animasyonu / PC oyunları / Portal 2 Portal 2

Orijinal Portal zaten kült bir şey ve kendi zamanına göre beklenmedik bir şey. Bu, fikirlerin ileri teknolojiler üzerindeki zaferine ilişkin zaman içinde test edilmiş tezi yalnızca bir kez daha doğruluyor.

CSS

Sayfamızın CSS stilleri şuna benzer.

Png); metin hizalama:sol; renk:#333; genişlik:800 piksel; yazı tipi boyutu:14 piksel; font-family:georgia, "zaman yeni aşklar", serif; kenar boşluğu:0 otomatik; dolgu:0; ) a( color:#333; text-decoration:none ) a:focus ( taslak: yok; ) h1 ( font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; harf aralığı:- 2px; renk:#394BEA; yazı tipi ağırlığı:700; dolgu:20px 0 0; metin gölgesi:0 1px 1px #70C5ED; ) h2 ( yazı tipi boyutu: 24px; yazı tipi ailesi: verdana, helvetica, arial, sans- serif; renk:#5C81CB; yazı tipi ağırlığı: 400; dolgu: 0 0 10px; metin gölgesi:0 1px 1px #70C5ED; ) h3, h3 a( yazı tipi boyutu:14px; yazı tipi ailesi:verdana, helvetica, arial , sans-serif; harf aralığı:-1px; renk:#333; yazı tipi ağırlığı: 700; text-transform:büyük harf; kenar boşluğu:0; dolgu:8px 0 8px 0; ) p ( color:#333; float: left; line-height:22px; kenar boşluğu:5px; dolgu:0 0 10px; ) #container ( kenar boşluğu: 0; dolgu: 0; ) .boxes ( arka plan:#fff; kenarlık:1px katı #ccc; float:left; dolgu:10px; konum:göreceli; genişlik:600px; ) img ( border:5px katı #CCCCCC; ) div.info ( border-bottom:1px katı #CCCCCC; float:left; kenar boşluğu:0; dolgu:0; genişlik: 100%; ) .block ( color:#0066CC; kayan nokta:sol; taşma:gizli; konum:göreceli; genişlik:600 piksel; ) .block h4, .block h4 a( color:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:uppercase; )

JS

.boxes sınıfına sahip bir DIV öğesi, rengini değiştirmek istediğimiz öğedir, yani bloktur.
Başlıkta çağıracağımız kod budur.

$(document).ready(function())( $(".boxes").hover(function() ( $(this).stop().animate((backgroundColor: "#40B8FE"), 800); ) , function() ( $(this).stop().animate((backgroundColor: "#ffffff"), 800); )); )); backgroundColor parametreleri rengi ayarlar ve 800 değeri animasyon hızıdır.

Metin içeren bir katman ve bir düğme var, üzerine tıkladığınızda bu katmandaki metnin rengini değiştirmeniz gerekiyor.

Rengi değiştir (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("color", "#F00" ); )) )); #katman (border:#CCC 1px katı; line-height:1,5; padding:10px 20px; width:800px; border-top:20px;) Ancak zevki kınayan ve acıyı öven insanların bu yanılgısının nereden geldiğini anlamanız için Mutlu bir hayatın mimarı dediğim, gerçeği keşfeden bu adamın ne söylediğini size tam olarak anlatacağım. Gerçekten de, hiç kimse zevkleri sırf zevk oldukları için reddetmez, küçümsemez ya da onlardan kaçınmaz; sadece zevklerin rasyonel olarak nasıl tadını çıkaracağını bilmeyenler büyük acılara maruz kaldıkları için. Tıpkı acıyı, yalnızca acı olduğu için seven, tercih eden ve arzulayan hiç kimsenin olmadığı gibi, bazen acı ve acının kayda değer bir zevk getirdiği durumlar ortaya çıktığı için değil. Basit bir örnek vermek gerekirse, hangimiz herhangi bir fayda sağlamasaydı herhangi bir yorucu fiziksel egzersizle meşgul olurduk? Ve kendisine hiçbir sorun getirmeyecek zevk için çabalayan veya kendisine hiçbir zevk getirmeyecek acıdan kaçınan birini kim haklı olarak suçlayabilir?

Bugün CSS ve JQuery kullanarak bir bloğun renginde nasıl yumuşak bir değişiklik yapılacağını öğreneceğiz. Bu eklentiyle inanılmaz derecede güzel tasarım sonuçları elde edebilirsiniz. Örneğin üzerine gelindiğinde rengi yumuşak bir şekilde değiştirecek harika bir menü yapabilirsiniz ve inanın çok güzel görünüyor.

JQuery

Başlangıç ​​olarak etiketlerin arasına aşağıdakileri koymanız gerekir:

Daha sonra yine etiketlerin arasına şu betiği kopyalıyoruz:

$(document).ready(function())( $(".Box").hover(function() ( $(this).stop().animate((backgroundColor: "#FF4500"), 400); ) , function() ( $(this).stop().animate((backgroundColor: "#ffffff"), 400); )); ));

.Box yukarıda CSS'de bulduğumuz blok sınıfıdır.

“#FF4500” - fareyle üzerine gelme rengi. 400 — gezinirken animasyon hızı.

“#ffffff”, imleci uzaklaştırdıktan sonraki başlangıç ​​rengidir. 400 — imleci uzaklaştırırken animasyon hızı.

HTML

Her şeyi yukarıda yazıldığı gibi yaptıktan sonra bloğun rengi yavaş yavaş değişecektir. Sayfaya böyle bir blok eklemek için aşağıdakileri doğru yere eklemeniz yeterlidir:

Ve blok görünecektir.

Önemli

Bu eklenti yalnızca arka plan rengini değiştirebilir. Örneğin, onu bağlantılara veya metne ekleyemezsiniz. Başka bir eklenti bağlantıların rengini değiştiriyor (Nasıl yapılacağını yakında mutlaka yazacağım).

Sayfadaki blokların benimki gibi farklı renklerde olmasını istiyorsanız, etiketlerin arasına birkaç komut dosyasını arka arkaya yerleştirmeniz gerekecek ve buna göre rengi istediğiniz gibi değiştirmeyi unutmayın. En önemli şey sınıfı değiştirmektir, örneğin yukarıdaki örneğimizde - Box sınıfı ve bir sonraki komut dosyası farklı bir sınıfla olmalıdır, örneğin Box1, sonra Box2 vb.

İşte bu kadar değerli arkadaşlar. Eğer bir şey anlamadıysanız yorumlarda sormayı unutmayın. Yakında görüşürüz.

Bir şekilde, bir renkten diğerine akan metnin etkisini yazma ihtiyacıyla karşı karşıya kaldığımda, beklenmedik bir şekilde bunun o kadar da önemsiz bir iş olmadığını kendim keşfettim.

Yalnızca Effects Core'un karşısına bir onay işareti bırakabilirsiniz. İhtiyacımız olan jQuery.animate() yöntemini genişleten bu modüldür; yalnızca indirilen derlemeyi bağlamanız yeterlidir:

Bundan sonra herhangi bir sayfa öğesinin metninin, çerçevesinin veya arka planının rengi animasyon için kullanılabilir.

Adım 2. Öğe animasyonları arasındaki gecikme.

Artık animasyonda her şey yolunda olduğuna göre, görevi zorlaştıran ikinci bir özellik daha var: koleksiyon öğelerinin animasyonu arasına bir gecikme eklemek.

Diyelim ki numaralandırılmış liste öğelerinden oluşan bir koleksiyonumuz var:

Var $elemanlar = $("ol > li");

Koleksiyonun her bir sonraki öğesinin animasyonu, bir öncekinden sonra belirli bir gecikmeyle başlamalıdır.

Aşağıdaki kodu kullanarak istediğiniz sonuca ulaşabilirsiniz:

İçin (var i = 0; i

setTimeout() işlevinin ilk parametresi olarak başka bir işlev döndüren bir işlevi aldığını unutmayın.

Bu yapılmazsa, o zaman i değişkeni referans olarak iletilecek ve zamanlayıcı işlevi yürütme zamanı geldiğinde, i'nin son değeri $elements.length değerine eşit olacak, çünkü bu andan itibaren for döngüsü sona ermiş olacak ve animasyon kesinlikle idam edilmeyecektir.

İç içe geçmiş bir işlev kullanarak, döngünün her yinelemesinde i'nin değerini kopyalarız ve bunun yardımıyla şunu elde ederiz: doğru işlem planlandı.

sonuçlar

Bu tür bir animasyonu, örneğin bazı parametreler listesinden en az birini seçmeniz gerektiğini göstermek veya yalnızca sayfanın bazı bloklarına dikkat çekmek için kullanabilirsiniz.