Animasyonları Zincirleme ve Kuyruğa Alma
Dinamik arayüzler için sıralı ve uyumlu görsel efektler oluşturmak üzere birden çok animasyon yöntemini zincirlemeyi ve animasyon kuyruğunu yönetmeyi keşfedin.
Animasyonları Zincirleme ve Kuyruğa Alma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 1. 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.
Animasyon Zincirlemeye Giriş
Bir öğenin hareket etmesini, ardından renginin değişmesini ve sonra görünümünün kaybolmasını istediğinizi düşünün. Bunları elle art arda yapmak zor olabilir!
jQuery'deki animasyon zincirleme özelliği, birden çok animasyon yöntemini birbirine bağlamanızı sağlar. Her animasyon yalnızca önceki tamamlandıktan sonra başlar ve böylece akıcı, sıralı efektler oluşturulur.
Temel Zincirleme Sözdizimi
jQuery yöntemleri çoğunlukla jQuery nesnesinin kendisini döndürür. Bu, sonuç üzerinde doğrudan başka bir yöntem çağırmanıza ve bir 'zincir' oluşturmanıza olanak tanır.
Burada bir kutu önce sağa, ardından aşağıya hareket eder. Çalıştırmayı deneyin!
<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Chain</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 1000) // Move right
.animate({top: '50px'}, 800); // Move down
});
});
</script>
</body>
</html>Karmaşık Sıralar Oluşturma
Birçok animasyon yöntemini birbirine zincirleyebilirsiniz. jQuery bu animasyonları otomatik olarak dahili bir kuyruğa yerleştirir ve tanımladığınız sırayla çalıştırılmalarını sağlar.
Bu, kullanıcı arayüzü öğeleriniz için sıralı bir akış oluşturur. Kutunun hareket etmesini, ardından büyümesini ve sonra görünümünün kaybolmasını izleyin!
<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: green;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Sequence</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800)
.animate({height: '100px', width: '100px'}, 600)
.animate({opacity: 0.5}, 500)
.animate({top: '100px'}, 700)
.fadeOut(500); // Fades out completely
});
});
</script>
</body>
</html>Animasyon Kuyruğunun Çalışma Şekli
Animasyon yöntemlerini zincirlediğinizde jQuery bunların hepsini aynı anda çalıştırmaz. Bunun yerine animasyonları animasyon kuyruğu (veya 'fx' kuyruğu) adı verilen özel bir listeye ekler.
- İlk animasyon hemen başlar.
- Sonraki animasyonlar kuyrukta bekler.
- Bir animasyon tamamlandığında jQuery kuyruktaki bir sonrakini otomatik olarak alır ve başlatır.
Bu, animasyonlarınızın sıralı ve öngörülebilir biçimde yürütülmesini sağlar.
.delay() ile Duraklamalar Ekleme
Bazen animasyonlar arasında duraklamaya ihtiyaç duyarsınız. .delay() yöntemi bunun için idealdir! Belirtilen süre boyunca animasyon kuyruğundaki sonraki öğelerin yürütülmesini duraklatır.
Kutu hareket eder, duraklar ve sonra yeniden hareket eder.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: purple;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Animation</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800) // Move right
.delay(1000) // Pause for 1 second
.animate({top: '50px'}, 800); // Move down
});
});
</script>
</body>
</html>Kuyrukta Özel Kod Çalıştırma
.queue() kullanarak animasyon olmayan işlevleri doğrudan kuyruğa ekleyebilirsiniz. Bu, animasyonların tam arasında metni değiştirmek veya bir class eklemek gibi eylemleri gerçekleştirmenizi sağlar.
İşlev, kuyruktaki sırası geldiğinde yürütülür. jQuery'ye kuyruktaki sonraki öğeye geçmesini bildirmek için özel işlevinizin içinde next() çağırmayı unutmayın!
<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: orange;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<p id="status">Ready</p>
<button id="startAnimation">Start Sequence</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800)
.queue(function(next) { // Add custom function to queue
$(this).css("background-color", "blue");
$("#status").text("Color changed!");
next(); // Crucial: tells jQuery to proceed
})
.animate({top: '50px'}, 800)
.queue(function(next) {
$("#status").text("Animation done!");
next();
});
});
});
</script>
</body>
</html>.stop() ile Animasyonları Kesme
Bir animasyonu ortasında durdurmak isterseniz ne olur? .stop() yöntemi bunun çözümüdür. Bir öğede o anda çalışmakta olan animasyonu durdurabilir.
.stop(true): Geçerli animasyonu durdurur ve animasyon kuyruğunun tamamını temizler..stop(false, true): Geçerli animasyonu durdurur ve onu bitiş durumuna götürür; ancak kuyruğu temizlemez.
Dikkatli kullanın; çünkü özenle planladığınız sıraları bozabilir!
<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: teal;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop (clear queue)</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 2000)
.animate({top: '100px'}, 2000)
.animate({left: '0px'}, 2000);
});
$("#stopAnimation").on("click", function() {
$("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
});
});
</script>
</body>
</html>.finish() ile Animasyonun Sonuna Atlama
.finish() yöntemi, bir öğede o anda çalışmakta olan tüm animasyonları hemen tamamlamanın ve animasyon kuyruğunu temizlemenin güçlü bir yoludur.
- Tüm animasyonlarda
.stop(true, true)çağırmak gibidir. - Öğe, kuyruktaki tüm animasyonların son durumuna anında geçer.
Bu yöntem, 'sıfırla' düğmeleri veya bir öğeyi hızla son animasyonlu durumuna geçirmek için kullanışlıdır.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: darkblue;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Long Chain</button>
<button id="finishAnimation">Finish All</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 3000)
.animate({top: '100px'}, 3000)
.animate({width: '100px'}, 3000);
});
$("#finishAnimation").on("click", function() {
$("#myBox").finish(); // Instantly jump to final state
});
});
</script>
</body>
</html>Çeşitli Efektleri Zincirleme
Zincirleme yalnızca .animate() için değildir! .fadeIn(), .slideUp(), .slideToggle() ve daha birçok jQuery animasyon yöntemini zincirleyebilirsiniz.
Bu yöntemler de aynı animasyon kuyruğunu kullanır ve karmaşık görsel sıraları kolayca oluşturmanızı sağlar.
<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 80px;
height: 80px;
background-color: #3498db;
margin-bottom: 10px;
display: none; /* Start hidden */
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Mixed Chain</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.fadeIn(500) // Fade in
.delay(500) // Pause
.slideUp(500) // Slide up
.delay(500) // Pause
.slideDown(500) // Slide down
.animate({width: '120px', height: '120px'}, 700); // Grow
});
});
</script>
</body>
</html>Hızlı Zincirleme Kontrolü
Aşağıdaki jQuery kodunu inceleyin. Düğmeye tıklandıktan sonra #myBox öğesinin son durumu ne olur?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#myBox {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0px;
opacity: 1;
}
</style>
</head>
<body>
<div id="myBox"></div>
<button id="btn">Click Me</button>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 500)
.delay(500)
.animate({opacity: 0.5}, 500)
.hide(500);
});
});
</script>
</body>
</html>Özet: Zincirleme ve Kuyruklar
Harika iş çıkardınız! jQuery'nin animasyon zincirleme ve kuyruğa alma mekanizmasını kullanarak dinamik, sıralı görsel efektler oluşturmayı öğrendiniz.
- Zincirleme: Birden çok animasyon yöntemini birbirine bağlar.
- Kuyruk: jQuery animasyonları bir sıra içinde yönetir.
.delay(): Animasyonlar arasında duraklar..queue(): Kuyruğa özel işlevler ekler..stop(): Kuyruğu keser veya temizler..finish(): Kuyruğa alınmış tüm animasyonları anında tamamlar.
Sonraki bölümde, daha da hassas bir denetim için özel yumuşatma ve animasyon geri çağırmalarını ele alacağız!
Sıkça Sorulan Sorular
“Animasyonları Zincirleme ve Kuyruğa Alma” dersi ücretsiz mi?
Evet — “Animasyonları Zincirleme ve Kuyruğa Alma” 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.
“Animasyonları Zincirleme ve Kuyruğa Alma” dersinde ne öğreneceğim?
Dinamik arayüzler için sıralı ve uyumlu görsel efektler oluşturmak üzere birden çok animasyon yöntemini zincirlemeyi ve animasyon kuyruğunu yönetmeyi keşfedin. 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 1. dersidir.
“Animasyonları Zincirleme ve Kuyruğa Alma” 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