Zingocan Alt domainimiz ders.zingocan.com Blogunda, jQuery, CSS, WordPress Kaynaklarına yer vereceğiz.
Bir süreliğine Zingocan.com da kalacak olan ders, menü ve eklentiler ders.zingocan.com İsmi duyualana dek buradadır. Daha sonra kaldırılacaktır.
İlginiz için teşekkür ederim
jQuery Video derslerimizde daha önce görmüş olduğumuz hide / show metodlarına bir alternatif olarak toggle metodu bulunmaktadır. toggle metodu belirlediğimiz nesneyi kaybedip daha sonra tekrar gösterebilme fonksiyonudur. 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
Yabancı bir siteden bulduğum güzel ve basit bir flash web tasarım scripti.
Web tasarım scripti için kullanabilirsiniz.
Örneği inceleyiniz.
Bir sonraki örnekte imaja tıklandığında imajı sağa doğru kaydıracağız ve saydamlığını %10′dan %100′e getireceğiz. Animasyon tamamlandığında imajın 3 saniye içerisinde gözden kaybolmasını sağlayacağız. Öncelikle CSS dosyamızı düzenleyelim.
#theImage
{
position: relative;
display: none;
}
Öğe, “left” özelliğinin belirtilmesinden sonra nispeten pozisyonlanmaya ihtiyaç duyar. Ayrıca görünümün de yavaşca kaybolmasını istiyoruz, öyleyse aşağıdaki şekilde kullanmamız gerekecek.
$(document).ready(function(){
$("#theImage").css("opacity", ".1");
$("#theImage").click(function()
{
$(this).animate
({left: "400px", opacity: "1"}, 3000, function()
{
$(this).fadeOut(3000);
}
);
});
});