Herkese zor gözüken bir JQuery...

[OGUZHANPW]

Merhaba arkadaşlar ben Oğuzhan Atalay.
Bu gün herkese zor gözüken fakat aslında çok kolay olan JQuery'i anlatacağım.
Anlatımım basit mod olup daha fazlasını isteyenlere skype üzerinden anlatabilirim.
Skype: oguzhannn4501at
DESTEK:

Linki görebilmek için üye olmanız gerekiyor. Giriş yap veya üye ol.

Unutmayın eğer öğrenmek istiyor iseniz sırasıyla okuyunuz!

​

Öncelikle JQuery'in çalışması için head taglarının arasına :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Yüklemesi bu kadar.. (İsterseniz sitesinden dosyayı indirip de yükleyebilirsiniz.)

Şimdi bir site.js dosyası oluşturalım ve head taglarının arasına koyalım.
Öğrenmeye başlamadan önce bu kodu iyi bilmelisiniz..

$(document).ready(function(){


});

Bu kodu bildikten sonrası kolaydır. Bu kodun içerisindekinin her zaman hazır olduğunu ifade eder.

İlerleyelim..
Kolay modda bilmeniz gereken bazı küçük kodlar vardır.

$(document).ready(function(){

    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});

Biraz karışık gibi gözüksede kolaydır. Anlatayım.
İster yazı ister buton farketmez, id="hide" ise <p>cümle</p> içeriğini gizler. Neden gizler ? .hide() gizler .show() gösterir. id="show" olan ise <p>cümle</p> yi gösterir. Çok karışık geldi değil mi ??
Alttaki linke bas ve test et anlıyacaksın!

Linki görebilmek için üye olmanız gerekiyor. Giriş yap veya üye ol.

Anladıysan geçelim...
Test ettiğinde hızlı kapandığını görüceksin bunu yavaşlatmak için .hide(1000) yaparsanız veya .show(1000) yapar iseniz yavaşlayacaktır. Daha gelişmiş bir örnek ile anlatayım..

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000); // gördüğünüz gibi 1000 yavaşlatıcak
    });
});

Linki görebilmek için üye olmanız gerekiyor. Giriş yap veya üye ol.

Girin ve test edin anlıyacaksınız..
Hem kapatıp hem açmak için .hide veya .show değilde .toggle yazmanız yeterlidir.

Burdan sonra aklınızda şekillenecektir.
Şimdi ise .slideDown() .slideUp() .slideToggle() Öğrenelim.. Unutmayın parantezin içine ne kadar büyük bir sayı girerseniz o kadar yavaşlar! Veya slow da yazabilirsiniz aşağıdaki örnek gibi..

$(document).ready(function(){

    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});

Linki görebilmek için üye olmanız gerekiyor. Giriş yap veya üye ol.

Denemeniz yeterli olucaktır.

Son aşamada animasyonu da anlar iseniz basit modu tamamen anlamış olucaksınız.
Anlamadığınız bir yerde lütfen sorunuz!!!!

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
    });
});

Bu kod sizde ne olabilir ? button a bastığınızda div i 250px sola opaklığını düşürüp yüksekliğini ve genişliğini 150px arttırıcaktır. Haydi test edelim ve görelim..

Linki görebilmek için üye olmanız gerekiyor. Giriş yap veya üye ol.

Size şu an bir upload sitesinde basit yöntemlerle kullandığım bir dosyayı göstermek isterim.

Linki görebilmek için üye olmanız gerekiyor. Giriş yap veya üye ol.

Siteden bakabilirsiniz.

Eğer bu bölümlerin hepsini anladıysanız ve daha fazla şey merak ediyor iseniz skype üzerinden eklemeniz yeterli olucaktır. Eğer bunların hiç birini anlamadıysanız fakat öğrenmek istiyorsanız çekinmeyin gelin skypedan öğretiyim. "Bilgi paylaştıkça çoğalır.."
Skype: oguzhannn4501at

Bazı kişilerin isteği üzerine ben html ve css de bilmiyorum fakat illa ki öğrenmek istiyorum diyenler çıktığı için gene ekliyebilirsiniz..
Şimdiden bu yazıyı okuyanlara teşekkür ederim.
"Bilgi paylaştıkça çoğalır.."

 

[Blueguy]

...

 

[OGUZHANPW]

Dostum, default renkte yazsan? Eski temayı kullanıyorum ne yapmalıyım, kör olacam vallahi.

Hemen düzeltiyim..

 

[BabaBAKNEAPTIM]

Hocam ZixCraft Site Scripti Size mi Ait