Gelişmiş Açma-Kapama ve Kaydırma Efektleri
Sorunsuz, duyarlı ve görsel açıdan çekici gösterme/gizleme ve geçiş efektleri oluşturmak için .slideToggle(), .fadeToggle() ve .animate() yöntemlerinin gelişmiş kullanımlarında ustalaşın.
Gelişmiş Açma-Kapama ve Kaydırma Efektleri, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.
Gelişmiş Geçişlere Hoş Geldiniz!
Bu derste dinamik gösterme/gizleme efektleri oluşturmak için jQuery'nin güçlü yöntemlerini daha ayrıntılı inceleyeceğiz. .slideToggle() ve .fadeToggle() yöntemlerinde ve özel geçişler için .animate() kullanımında ustalaşacaksınız.
Bu teknikler, etkileşimli ve görsel açıdan çekici kullanıcı arayüzleri oluşturmak için gereklidir.
slideToggle() ile Öğeleri Kaydırma
.slideToggle() yöntemi, eşleşen öğelerin yüksekliğine animasyon uygulayarak öğelerin yukarı veya aşağı kaymasını sağlar. Bir öğe görünürse gizlemek için yukarı kayar. Gizliyse göstermek için aşağı kayar.
Açılır menüler veya genişleyen içerik bölümleri için idealdir. Bu örneği çalıştırmayı deneyin:
// HTML for context:
// <button id="toggleButton">Toggle Panel</button>
// <div id="myPanel" style="background-color: lightblue; padding: 10px;">
// <p>This is a sliding panel!</p>
// </div>
$(document).ready(function() {
$("#toggleButton").click(function() {
$("#myPanel").slideToggle();
});
});slideToggle() Özelleştirme
Bir süre (milisaniye cinsinden veya 'slow', 'fast' değerleriyle) belirterek .slideToggle() animasyonunun hızını kontrol edebilirsiniz. Animasyon tamamlandığında çalışacak bir geri çağrı işlevi de sağlayabilirsiniz.
.slideToggle(duration).slideToggle(duration, callback)
Aşağıdaki kodda hızla denemeler yapın:
// HTML for context:
// <button id="speedToggleBtn">Toggle Fast</button>
// <p id="speedPanel" style="background-color: #e0ffe0; padding: 10px;">
// I slide fast and then alert!
// </p>
$(document).ready(function() {
$("#speedToggleBtn").click(function() {
$("#speedPanel").slideToggle("fast", function() {
alert("Animation finished!");
});
});
});fadeToggle() ile Öğeleri Soluklaştırma
.slideToggle() yöntemine benzer şekilde, .fadeToggle() yöntemi de eşleşen öğeleri opaklıklarına animasyon uygulayarak gösterir veya gizler. Bir öğe görünürse soluklaşarak kaybolur. Gizliyse soluklaşarak görünür.
Bu, yumuşak ve saydam bir geçiş efekti oluşturur. Uygulamalı olarak görün:
// HTML for context:
// <button id="fadeToggleBtn">Toggle Fade</button>
// <div id="fadePanel" style="background-color: #ffe0e0; padding: 10px;">
// <p>This panel fades in and out!</p>
// </div>
$(document).ready(function() {
$("#fadeToggleBtn").click(function() {
$("#fadePanel").fadeToggle();
});
});fadeToggle() Özelleştirme
.slideToggle() yönteminde olduğu gibi, .fadeToggle() yönteminin hızını özelleştirebilir ve bir geri çağrı işlevi ekleyebilirsiniz. Böylece işlemleri birbirine zincirleyebilir veya soluklaştırma tamamlandığında görevler gerçekleştirebilirsiniz.
.fadeToggle(duration).fadeToggle(duration, callback)
Yavaş soluklaştırmayı ve renk değişimini gözlemleyin:
// HTML for context:
// <button id="customFadeBtn">Toggle Custom Fade</button>
// <p id="customFadePanel" style="background-color: #e0e0ff; padding: 10px;">
// I fade slowly and change color!
// </p>
$(document).ready(function() {
$("#customFadeBtn").click(function() {
$("#customFadePanel").fadeToggle(1000, function() {
$(this).css("color", "purple");
});
});
});Kaydırma ve Soluklaştırmayı Birlikte Kullanma
Daha karmaşık efektler için .slideToggle() ve .fadeToggle() yöntemlerini birleştirebilirsiniz. Örneğin bir öğenin aşağı kayarken aynı zamanda görünür hâle gelmesini veya bunun tersini isteyebilirsiniz.
Sıralı olarak çağrıldıklarında efektlerini arka arkaya uygularlar. Gerçek eşzamanlı efektler için genellikle .animate() tercih edilir (bunu bir sonraki bölümde göreceğiz!).
// HTML for context:
// <button id="mixedToggleBtn">Toggle Mixed</button>
// <div id="mixedPanel" style="background-color: #ffffe0; padding: 10px;">
// <p>I will slide and fade!</p>
// </div>
$(document).ready(function() {
$("#mixedToggleBtn").click(function() {
$("#mixedPanel").slideToggle(500);
$("#mixedPanel").fadeToggle(500);
});
});Animasyonlu Basit Geçiş
Temel .toggle() yöntemini hatırladınız mı? Bu yöntem bir öğeyi basitçe gösterir veya gizler. Ancak .slideToggle() ve .fadeToggle() gibi süre ve geri çağrı parametrelerini de kabul edebilir.
Animasyon parametreleriyle kullanıldığında .toggle(), varsayılan olarak etkili biçimde .fadeToggle() hâline gelir.
// HTML for context:
// <button id="simpleToggleBtn">Toggle with Animation</button>
// <p id="simpleTogglePanel" style="background-color: #f0f0f0; padding: 10px;">
// I toggle with a default fade effect.
// </p>
$(document).ready(function() {
$("#simpleToggleBtn").click(function() {
$("#simpleTogglePanel").toggle("slow", function() {
console.log("Toggle animation done!");
});
});
});Özel Geçiş Efektleri Oluşturma
En üst düzey kontrol için .animate() yöntemini kullanın. Neredeyse tüm CSS özelliklerine sayısal olarak animasyon uygulayabilirsiniz. Özel geçiş efektleri oluşturmak için height, opacity veya hatta left/top gibi özelliklere animasyon uygulayabilirsiniz.
Önemli nokta, belirli bir değere animasyon uygulamak veya height ya da width gibi özellikler için özel 'toggle' anahtar sözcüğünü kullanmaktır.
// HTML for context:
// <button id="customAnimateBtn">Custom Animate Toggle</button>
// <div id="customAnimatePanel" style="background-color: lightgreen; padding: 10px; height: 100px; overflow: hidden;">
// <p>I animate my height to toggle!</p>
// </div>
$(document).ready(function() {
$("#customAnimateBtn").click(function() {
$("#customAnimatePanel").animate({
height: 'toggle' // Animates height to 'toggle' (show/hide)
}, 500);
});
});Eşzamanlı Özel Animasyonlar
Birleşik bir geçiş efekti için birden çok CSS özelliğini aynı anda değiştirmeniz gerektiğinde .animate() gerçekten öne çıkar. Kaydırma ve soluklaştırma efekti elde etmek için height ve opacity özelliklerine eşzamanlı olarak animasyon uygulayabilirsiniz.
Opaklığı 0'a animasyonla düşürdükten sonra öğenin düzenden tamamen kaybolmasını istiyorsanız display özelliğini yönetmeyi unutmayın.
// HTML for context:
// <button id="combinedAnimateBtn">Combined Toggle</button>
// <div id="combinedAnimatePanel" style="background-color: lightcoral; padding: 10px; height: 100px; opacity: 1; overflow: hidden;">
// <p>I slide AND fade!</p>
// </div>
$(document).ready(function() {
$("#combinedAnimateBtn").click(function() {
var panel = $("#combinedAnimatePanel");
if (panel.is(":visible")) {
panel.animate({
height: '0px',
opacity: '0'
}, 500, function() {
$(this).hide(); // Ensure display: none after animation
});
} else {
panel.show().animate({ // Show first, then animate
height: '100px',
opacity: '1'
}, 500);
}
});
});Geçiş Bilginizi Sınayın
Aşağıdaki jQuery yöntemlerinden hangisi bir öğede animasyonlu gösterme/gizleme efekti oluşturmak için kullanılabilir?
Geçiş ve animate Özeti
Harika iş çıkardınız! Dinamik gösterme/gizleme efektleri için gelişmiş jQuery tekniklerinde ustalaştınız.
- Dikey kaydırma için
.slideToggle()yöntemini inceledik. - Yumuşak opaklık geçişleri için
.fadeToggle()yöntemini kullandık. .toggle()yönteminin de animasyon uygulayabildiğini gördük.- En önemlisi, birden çok CSS özelliği üzerinde ayrıntılı kontrol sağlayan tamamen özel ve birleşik geçiş efektleri için
.animate()yöntemini kullanmayı öğrendiniz.
Etkileyici etkileşimli kullanıcı arayüzleri oluşturmak için pratik yapmaya devam edin!
Sıkça Sorulan Sorular
“Gelişmiş Açma-Kapama ve Kaydırma Efektleri” dersi ücretsiz mi?
Evet — “Gelişmiş Açma-Kapama ve Kaydırma Efektleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.
“Gelişmiş Açma-Kapama ve Kaydırma Efektleri” dersinde ne öğreneceğim?
Sorunsuz, duyarlı ve görsel açıdan çekici gösterme/gizleme ve geçiş efektleri oluşturmak için .slideToggle(), .fadeToggle() ve .animate() yöntemlerinin gelişmiş kullanımlarında ustalaşın. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.
“Gelişmiş Açma-Kapama ve Kaydırma Efektleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Animasyonları Zincirleme ve Kuyruğa Alma
- Özel Yumuşatma ve Animasyon Geri Çağrıları
- Gelişmiş Açma-Kapama ve Kaydırma Efektleri