Bu yazı, jQuery'de hide() ve fadeOut(), show() ve fadeIn() arasındaki temel farkları vurgulamaktadır.
jQuery'de hide() ve fadeOut(), show() ve fadeIn() arasındaki farklara geçmeden önce, aşağıdaki kılavuzları okuyarak bu yöntemlerin temellerine bakın:
- jQuery'nin fadeIn() Yöntemi
- jQuery'nin fadeOut() Yöntemi
- JavaScript JQuery Hide() Yöntemi | Açıklandı
- JQuery Show() Yöntemi | Açıklandı
Öncelikle jQuery'deki hide() ve fadeOut() yöntemleri arasındaki farka bakın.
jQuery'de hide() ve fadeOut() arasındaki farkı ayırt edin
'Arasındaki tek temel fark' saklamak() ' Ve ' fadeOut() ” yöntemi şudur:
- Zaman aralığı : “ saklamak() ' yöntemi varsayılan olarak öğeyi herhangi bir zaman aralığı tüketmeden opaklığını 100'den 0'a değiştirerek anında gizler, oysa ' fadeOut() ” yöntemi kaybolur, yani öğeyi varsayılan değeri olan “400ms” içinde kademeli olarak gizler.
Belirtilen farkın pratik uygulamasını görelim.
İlk önce aşağıdaki HTML koduna bakın:
< merkez >< h2 kimliği = 'H2' > Linuxhint'e hoş geldiniz ! h2 >
< düğme > Öğeyi Gizle düğme >
merkez >
Yukarıdaki kod satırlarında:
- “
” etiketi, verilen öğelerin web sayfasının ortasındaki hizalamasını ayarlar. - “ ” etiketi, “H2” kimliğine sahip 2. düzey bir alt başlık oluşturur.
- “
” etiketi yeni bir düğme ekler.
Not: Bu kılavuz boyunca yukarıdaki HTML kodu takip edilmektedir.
Örnek: jQuery “hide()” Yöntemini “Varsayılan” Değerle Uygulamak
Bu örnek, bir öğeyi gizlemek için 'hide()' işlevini varsayılan değerleriyle uygular:
< senaryo >$ ( belge ) . hazır ( işlev ( ) {
$ ( 'düğme' ) . tıklamak ( işlev ( ) {
$ ( '#H2' ) . saklamak ( ) ;
} ) ;
} ) ;
senaryo >
Yukarıdaki kod satırlarında:
- Öncelikle “ hazır() Geçerli HTML belgesi yüklendiğinde belirtilen işlevleri yürütmek için ” yöntemi uygulanır.
- Daha sonra “ tıklamak() ” yöntemi, düğme tıklatıldığında bağlantılı işlevin gerçekleştirilmesinden sorumludur.
- Bundan sonra “ saklamak() ” yöntemi, kimliği “H2” olan erişilen başlık öğesini hemen gizler.
Çıktı
Düğmeye tıklandığında başlık öğesinin hemen gizlendiği görülebilir.
Örnek: jQuery “fadeOut()” Yöntemini “Default” Değeriyle Uygulamak
Bu örnekte, verilen öğeyi “400ms”de kademeli olarak gizlemek için varsayılan değerleriyle “fadeOut()” yöntemi kullanılmaktadır.
Bu senaryoda “düğme” öğesinin içeriği değiştirilir:
< düğme > solma ( Saklamak Öğe ) düğme >Şimdi “fadeOut()” yöntemini şu şekilde uygulayın:
< senaryo >$ ( belge ) . hazır ( işlev ( ) {
$ ( 'düğme' ) . tıklamak ( işlev ( ) {
$ ( '#H2' ) . solma ( ) ;
} ) ;
} ) ;
senaryo >
Bu sırada “ fadeOut() Erişilen başlık öğesinin 400ms yani varsayılan değerle silinmesi için ” yöntemi uygulanır.
Çıktı
Çıktı, verilen düğme tıklamasının başlık öğesini varsayılan zaman aralığında, yani '400 ms' içinde kademeli olarak gizlediğini açıkça göstermektedir.
JQuery'de show() ve fadeIn() Arasındaki Farkı Belirleyin
“hide()” ve “fadeOut()” yöntemlerine benzer şekilde “show()” ve “fadeIn()” yöntemleri arasında da aynı fark vardır:
- Zaman aralığı : “ göstermek() ' yöntemi varsayılan olarak gizli öğeyi opaklığını hemen 0'dan 100'e değiştirerek görüntüler, oysa ' fadeIn() ” yöntemi, gizli öğeyi varsayılan değeri olan “400ms” cinsinden kademeli olarak gösterir.
Örnek: jQuery “show()” Yöntemini “Varsayılan” Değerle Uygulamak
Bu örnek, gizli öğeyi görüntülemek için 'show()'u varsayılan değerleriyle uygular.
İlk önce sağlanan HTML kod bloğuna bakın:
< merkez >< düğme > Öğeyi Göster düğme >
< h2 kimliği = 'H2' stil = 'görüntü yok' > Linuxhint'e hoş geldiniz ! h2 >
merkez >
Bu senaryoya göre verilen başlık elemanı “” yardımıyla gizlenir. görüntü yok ' mülk.
Şimdi “show()” yönteminin pratik uygulamasını anlamak için verilen kod bloğunu takip edin:
< senaryo >$ ( belge ) . hazır ( işlev ( ) {
$ ( 'düğme' ) . tıklamak ( işlev ( ) {
$ ( '#H2' ) . göstermek ( ) ;
} ) ;
} ) ;
senaryo >
Yukarıdaki kod bloğu “ göstermek() ” Eklenen gizli öğeyi hemen görüntülemek için yöntem.
Çıktı
Düğmeye tıklandığında gizli başlık öğesinin hemen gösterildiği görülebilir.
Örnek: jQuery “fadeIn()” Yöntemini “Default” Değeriyle Uygulamak
Bu örnek, varsayılan değeri olan 'fadeIn()' yöntemini kullanan gizli öğeyi gösterir: 400ms ”:
Düğme öğesinin metni verilen senaryoya göre değiştirilir:
< düğme > fadeIn ( Göstermek Öğe ) düğme >Şimdi “uygula” fadeIn() Aşağıdaki kod bloğunu kullanan yöntem:
< senaryo >$ ( belge ) . hazır ( işlev ( ) {
$ ( 'düğme' ) . tıklamak ( işlev ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
senaryo >
Bu kod bloğunda “ fadeIn() “H2” kimliğiyle eşleşen gizli öğeyi 400ms yani varsayılan değerde göstermek için ” yöntemi kullanılır.
Çıktı
Belirli bir düğmeye tıklamanın, gizli öğeyi varsayılan zaman aralığında, yani “400ms” içinde kademeli olarak gösterdiği gözlemlenebilir.
Çözüm
JQuery'de, arasındaki tek önemli fark saklamak() Ve fadeOut() , göstermek() , Ve fadeIn() yöntem “ Zaman aralığı ”. “show()” ve “hide()” yöntemi varsayılan olarak işlevlerini anında gerçekleştirirken, “fadeIn()” ve “fadeOut()” yöntemi görevlerini varsayılan zaman aralığında yani “400ms”de gerçekleştirir. Bu yazı, jQuery'de hide() ve fadeOut(), show() ve fadeIn() arasındaki temel farkları pratik olarak açıkladı.