Daha önceki video derslerimizde jQuery hide metodu ile belirlediğimiz nesneyi kaybedebilme özelliğini göstermiştim.Bu derste de yine hide ve bunun yanında parents fonksiyonunu kullanarak Bir disappear yöntemine örnek vereceğim..Aşağıdaki ekran görüntüsünde de gördüğünüz gibi çarpı işaretine tıklanıldığı zaman belirlenen kutunun kapanmasına dair bir örnek olacaktır. Continue reading
Dünkü dersimizde jQuery‘de hover metodunu kullanarak resmimizin şeffaflık ayarlarının, mouse hareketi ile değişmesini sağladık. Continue reading
Dördüncü jQuery video dersimizde, sayfamıza jquery kullanarak var komutu ile yeni bir varyasyon oluşturma daha sonra bu varyasyonu fonksiyonlarımızda kullanarak örnek olarak yaptığımız listemizde yeni listelerin oluşmasını sağladık.
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme
Daha önceki derslerimizde, jquery başlangıç ve jquery ile fade, slide, hide-show metodlarını nasıl kullanabileceğimiz hakkında 2 video uygulamasını görmüştük.Bu dersimizde ise jQuery ‘de animate metodu ile objelere hareket kazandırma ve slayt oluşturmak için ön başlangıç yaptık..jQuery Daha kaliteli video için videoyu indiriniz.
Video içeriği;
Dersimizde bulunan index.html dosyasında yaptığımız bazı değişikliklerden bahsedecek olursak;
<style type="text/css">
#kutu
{
background: orange;
width: 300px;
height: 300px;
position: relative;
}
</style>
position: relative; kodu belirlediğimiz katmanın posizyonunu bizim vereceğimiz bir bildirim ile konum değişikliliğine girebilmesini sağlar
<script type="text/javascript">
$(function() {
$('#kutu').click(function() {
$(this).animate({
"left" : "300px"
});
$(this).animate({
"width" : "100px",
"height" : "50px"
});
});
});
</script>
$(this).animate({ ile daha önce kullandığımız fonksiyondaki elemanımızın sürekliliğini devam ettirdiğimizi ve aynı elamanla yeni bir fonksiyon oluşturduğumuzu belirttik.
Daha sonra animate fonksiyonu ile “kutu” olarak belirlediğimiz katrmana bir fonksiyon atadık ve ;
“left” : “300px”
“width” : “100px”,
“height” : “50px”
Komutları ile sayfa boyunca 300px sürüklenmesini, genişlik ayarının 100px‘e düşmesini ve yüksekliğininde 50px‘e düşmesini $(‘#kutu’).click(function() { fonksiyonu ile “kutu” katmanına tıklanması ile sağladık.
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme
Merhaba arkadaşlar.. Bildirgec‘ te ve blogumuzda pm olarak özel istekte bulunan arkadaşlara yöenlik jQuery yeni başlayanlar için dersler hazırlayacağım. Bu konumuzda jQuery öğrenebilmek içni ilk derimizdir.
İlk başta Video ya geçmeden önce jQuery kullanabilmek için jquery resmi sitesinden jQuery Javascript dosyasını indiriniz.Daha sonra Video’yu izleyerek jQuery kalıpları nasıl oluşturulur ve ilk olarak nereden başlamalıyız sorularınıza cevap alabilirsiniz.. Umarım faydalı bir kaynak olmuştur..Daha kaliteli Görüntü için Videoyu indiriniz
jQuery kullanabilmek için videodada gösterdiğim gibi jquery.com sitesinden indirdiğiniz jquery.js dosyası eğer index.html olarak kullandığımız sayfamız ile aynı klasördeyse (farklı klasördeyse yolunu belirtmeniz gerekiyor)aşağıdaki kodu <head> .. </head> tagları arasına giriniz ve videoda gösterdiğim uygulamaları html dosyanıza işleyiniz.
<script src="jquery.js" type="text/javascript"></script>
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme