jQuery ve Animasyonlar
jQuery ve Animasyonlar
jQuery ve Animasyonlar, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 1 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 1 dersten oluşur.
Giriş
Merhaba,
Bu bölümde jQuery ile animasyonları öğreneceğiz.
Hemen başlayalım.
show ve hide yöntemleri
show() ve hide() yöntemleri
show ve hide yöntemleriyle bir DOM nesnesini ekranda gösterebilir ve gizleyebiliriz.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>toggle yöntemi
toggle() yöntemi
Bunlara ek olarak, adından ne yaptığı anlaşılabilen toggle() yöntemi de vardır. Bu yöntemle öğe gizliyse gösterilir, gösteriliyorsa gizlenir.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>fadeIn ve fadeOut
fadeIn() ve fadeOut() yöntemleri
Şimdi HTML öğelerinin gösterilmesini ve gizlenmesini animasyonlu hâle getiren fadeIn ve fadeOut yöntemlerine bakalım.
fadeIn ve fadeOut yöntemi, isteğe bağlı olarak milisaniye cinsinden bir sayı değeri bekler. Bu değer animasyonun kaç milisaniye süreceğini belirler. Bir bağımsız değişken geçirmezsek varsayılan değer kullanılır.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadein ve fadeout
fadeOut, belirli bir süre boyunca öğelerin opaklığını azaltır. Opaklık 0 olduğunda display özelliği none değerini alır.
Bu, yukarıda öğrendiğimiz hide() yönteminin opaklık animasyonuyla desteklenmiş hâlidir.
FadeIn, fadeOut yönteminin tersidir.
fadeToggle yöntemi
fadeToggle() yöntemi
fadeToggle() yöntemi toggle() yöntemine benzer. Öğe gizliyse gösterir, gösteriliyorsa gizler ve tahmin edebileceğiniz gibi bunu animasyonla yapar.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>CSS animasyonu
CSS animasyonları
jQuery'deki animasyonlar animate() yöntemiyle gerçekleştirilir. Bu yöntemin içine JSON bağımsız değişkeni verilir. Bu JSON içinde hedef öğenin hangi CSS özelliklerinin değişeceğini tanımlarız.
İkinci parametre, milisaniye cinsinden animasyon süresidir (Bu parametre isteğe bağlıdır.)
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Animasyon olay işleyicisi
animate yöntemine atayabileceğimiz son bağımsız değişken, animasyon sona erdiğinde çalıştırabileceğimiz olay işleyicisidir.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>göreli animasyon
Animasyonlarla ilgili küçük bir kolaylıktan da bahsedelim.
Animasyonlarda kullanılacak özelliklere mutlak değerler vermek yerine göreli değerler atanabilir.
Aşağıdaki örnekle bunu daha net anlayabiliriz.
Animasyon sırasında ilgili hedef öğenin top özelliğine 100px eklendi.
$("button").animate({
top: "+=100px",
});animasyonu durdurma
Şu anda çalışmakta olan bir animasyonu durdurmak için animasyonun tanımlandığı hedefi seçip stop() yöntemini kullanmak yeterlidir.
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Hazır yöntemler
jQuery ile özel CSS özellikleri tanımlayarak animasyonlar oluşturabildiğimiz gibi jQuery'nin hazır yöntemlerini de kullanabiliriz.
Haydi, aşağıdaki kodu inceleyelim.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");göreli animasyon süresi
Diğer animasyon yöntemlerinde olduğu gibi, bu yöntemde animasyonun süresini atamak istiyorsak süreyi ilk bağımsız değişken olarak geçirmeliyiz.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");olay işleyicisi
slide animasyonu hakkında anlatacağım son şey şu. Hmm, sanırım bunu unuttum.
animate yönteminde olduğu gibi (animasyon tamamlandığında çalışacak bir olay işleyicisi tanımlamak için), yukarıdaki yöntemlere ikinci bağımsız değişken olarak anonim işlev tanımlayabiliriz.
setTimeout(function() {
//Call when animation is completed
}, 1000);Tebrikler
Tebrikler 🎉
jQuery ve animasyonları öğrendik.
Bir sonraki bölümde AJAX işlemlerini öğreneceğiz.
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 22
- Dersler
- 48
Sıkça Sorulan Sorular
“jQuery ve Animasyonlar” dersi ücretsiz mi?
Evet — “jQuery ve Animasyonlar” 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 1 dersten oluşur.
“jQuery ve Animasyonlar” dersinde ne öğreneceğim?
jQuery ve Animasyonlar 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, 1 dersinin 1. dersidir.
“jQuery ve Animasyonlar” 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.