JQuery Animate Olay Kullanımı – Web Tasarım & Programlama
Javascript Jquery

JQuery Animate Olay Kullanımı

Bu örneğimizde açılır-kapanır div oluşturacağız. Bunun için JavaScript’in kütüphanesi olan JQuery’i kullanacağız.

Örneğe başlamadan önce JQuery’i indirmemiz gerekiyor. https://jquery.com/

HTML: Öncelikle ‘ustPanel’ adında bir div oluşturuyorum. Bu divimiz aşağı yukarı hareket edecek olan divimiz. İçerisine şimdilik örnek bir yazı yazıyorum. Daha sonra açılıp kapanmasını sağlamak için içerisine bir div ekliyoruz. Bu div bir buton olarak da görülebilir.

Divin dışarısına örnek yazı yazıyoruz. Şimdilik alt alta duracaklar. ustPanel divi şuan tamamen sayfaya bağlı o yüzden örnek yazımızı aşağı atıyor. Bunu önlemek için Css ile divi sayfadan ayıracağız.

CSS: İlk olarak html ve body de olan boşlukları resetliyoruz. ustPanel divini ‘position: fixed’ ile sabitliyoruz. Böylece altındaki yazımız yukarı kayıyor. Genel olarak ayarladıktan sonra ‘top:-195px’ yaparak sayfanın dışına kaydırıyoruz.

Daha sonra buton görevi gören divimizi sayfadan ayırıyoruz. ustPanel divi fixed olduğu için bu divimiz ona göre pozisyon olacak. Yerini ayarladıktan sonra genel hatlarını oluşturuyoruz.

JQuery: Jquery kodlarımızı kurucu methodun içerisine yazıyoruz. Buton görevi gören divimize tıklama olayını atıyoruz.

Daha sonra tıklama olayında çalışacak kodları yazıyoruz. Konum diye bir değişken tanımlayarak ‘ustPanel’ in top değerini içerisine atıyoruz.

Buradan sonra koşullarımızı yazıyoruz. Konum değişkeni 0(sıfır)’a eşit olduğunda (Yani açıkken) taklandığında div yukarı kaydırılacak, top değeri -195px olarak değişecek ve divin içerisindeki ‘AÇ’ yazısı ‘KAPAT’ yazısına dönüşecek. Else kısmında ise tam tersi olacak. Yani tıklandığında divin top değeri 0(sıfır) olacak.

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box